<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>C2D2</title>
    <!-- * Style 开始 -->
    <!-- Icon 图标样式 -->
    <link rel="shortcut icon" type="image/x-icon" href="./img/Icon.ico">
    <!-- 禁止 Copy -->
    <link rel="stylesheet" type="text/css" href="./css/No_Copy.css">
    <!-- 初始样式 -->
    <link rel="stylesheet" type="text/css" href="./css/Demo.css">
    <!-- 颜色样式 -->
    <link rel="stylesheet" type="text/css" href="./css/TextColor.css">
    <!-- 通用样式 -->
    <link rel="stylesheet" type="text/css" href="./css/Style.css">
    <!-- 滚动条样式 -->
    <link rel="stylesheet" type="text/css" href="./css/NewScrollBarRules.css">
    <!-- ! Style 结束 -->

    <!-- * Script 开始 -->
    <!-- 数字脚本 -->
    <script type="text/javascript" src="./js/Demo.js"></script>
    <!-- 动态 title -->
    <script type="text/javascript" src="./js/Browse.js"></script>
    <!-- foot => 链接 文字 提示 -->
    <script type="text/javascript" src="./js/BottomA.js"></script>
    <!-- 颜色脚本 -->
    <script src="./js/Color.js"></script>
    <!-- ! Script 结束 -->
</head>

<body>
    <!-- 页眉部分 -->
    <div class="top">
        <!-- <h1>第二模块 第 01 单元</h1> -->
        <h1>Web Note</h1>
    </div>
    <!-- ! 页眉部分 End -->

    <!-- 中间部分 -->
    <div class="demo">
        <!-- 第 01 组 -->
        <div class="demo-box">
            <!-- 提问部分 -->
            <div class="wen">
                <!-- 序号 -->
                <div class="num">Null</div>
                <!-- 问题 -->
                <div class="text-box">数组</div>
            </div>
            <!-- 回答部分 -->
            <div class="da one-box c-red font-size-one">&gt;&gt; 数组的定义</div>
            <div class="da r-font-two">1、数组是一组有序的数据集合。数组内部可以存放多个数据，不限制数据类型，并且数组的长度可以动态的调整。</div>
            <div class="da r-font-two">2、创建数组最简单的方式就是数组字面量方式、</div>
            <div class="da r-font-two">3、数组的字面量：[]。</div>
            <div class="da r-font-two">4、一般将数组字面量赋值给一个变量，方便后期对数组进行操作。</div>
            <div class="da r-font-two">5、如果存放多个数据，每个数据之间用逗号分隔，最后一个数据后面不需要加逗号。</div>
            <div class="da">&nbsp;&nbsp;</div>
            <div class="da">&nbsp;&nbsp;</div>
            <div class="da c-red font-size-one">&gt;&gt; 获取数组元素</div>
            <div class="da r-font-two">1、获取方式：Arr[index]。</div>
            <div class="da r-font-two">2、更改方式：Arr[index] = Obj。</div>
            <div class="da r-font-two">3、获取长度：Arr.length。</div>
            <div class="da r-font-two">4、更改长度：Arr.length = Number（仅限增加长度，多出的部分，值为：undefined）。</div>
            <div class="da">&nbsp;&nbsp;</div>
            <div class="da">&nbsp;&nbsp;</div>
            <div class="da c-red font-size-one">&gt;&gt; 数组遍历</div>
            <div class="da r-font-two">遍历：遍及所有，对数组的每一个元素都访问一次就叫做遍历。利用 for 循环，将数组中的每一项都单独拿出来，进行一些操作。</div>
            <div class="da r-font-two m-tb-5px code-text p-b-one">
                <div class="m-tb-5px">// 使用方法：</div>
                <div class="da r-font-two m-tb-5px">for(var oText = 0;oText &lt;= arr.length - 1;oText++){</div>
                <div class="da r-font-four m-tb-5px">Content</div>
                <div class="da r-font-two m-tb-5px">}</div>
            </div>
        </div>

        <!-- 第 02 组 -->
        <div class="demo-box">
            <!-- 提问部分 -->
            <div class="wen">
                <!-- 序号 -->
                <div class="num">Null</div>
                <!-- 问题 -->
                <div class="text-box">函数的概念</div>
            </div>
            <!-- 回答部分 -->
            <!-- 模块 2-01 -->
            <div class="da one-box c-red font-size-one">&gt;&gt; 函数的概念</div>
            <div class="da r-font-two">
                1、函数（function）也叫做功能、方法；函数可以将一段代码封装起来，被封装起来的函数具备某一项特殊的功能，内部封装的一段代码作为一个完整的结构体，要执行就会都执行，反之同理。</div>
            <div class="da r-font-two">2、函数的作用就是封装一段代码，将来可以重复使用。</div>

            <!-- 模块 2-02 -->
            <div class="da r-font-two">&nbsp;</div>
            <div class="da r-font-two">&nbsp;</div>
            <div class="da c-red font-size-one">&gt;&gt; 函数的声明</div>
            <div class="da r-font-two">1、函数声明又称为：函数定义，函数必须先定义再使用。</div>
            <div class="da r-font-two">2、如果没有定义函数是无法直接使用的。会出现引用错误。</div>
            <div class="da r-font-two">3、函数声明语法：</div>
            <div class="da r-font-two m-tb-5px code-text p-b-one">
                <div class="m-tb-5px">// 使用方法：</div>
                <div class="da r-font-two m-tb-5px">function 函数名Name(参数Parameter){</div>
                <div class="da r-font-four m-tb-5px">封装的结构体Content</div>
                <div class="da r-font-two m-tb-5px">}</div>
            </div>
            <div class="da r-font-two c-blue">※：特点：函数声明的时候，函数体并不会执行，只用当函数被调用的时候才会被执行。</div>

            <!-- 模块 2-03 -->
            <div class="da r-font-two">&nbsp;</div>
            <div class="da r-font-two">&nbsp;</div>
            <div class="da c-red font-size-one">&gt;&gt; 函数的命名规范</div>
            <div class="da r-font-two">函数名可以使用：字母、下划线、数字、$。</div>
            <div class="da r-font-two c-blue">不可以让数字作为函数名字的开头，且函数名严格区分大小写。</div>

            <!-- 模块 2-04 -->
            <div class="da r-font-two">&nbsp;</div>
            <div class="da r-font-two">&nbsp;</div>
            <div class="da c-red font-size-one">&gt;&gt; 函数的调用</div>
            <div class="da r-font-two">1、调用方法：函数名Name(参数Parameter);</div>
            <div class="da r-font-two">2、函数调用也称为：函数执行；调用时会将函数内部封装的所有结构体的代码立即执行。</div>
            <div class="da r-font-two">3、函数内部语句执行的位置，与函数定义的位置无关，与函数调用的位置有关。</div>
            <div class="da r-font-two">4、函数可以一次定义，多次执行。</div>

            <!-- 模块 2-05 -->
            <div class="da r-font-two">&nbsp;</div>
            <div class="da r-font-two">&nbsp;</div>
            <div class="da c-red font-size-one">&gt;&gt; 函数的参数 1</div>
            <div class="da r-font-two">1、函数预留了一个接口，专门用于让用户自定义内容，使函数发生一些执行效果变化。</div>
            <div class="da r-font-two">2、接口：就是函数的参数，函数参数的本质就是变量，可以接受任意类型的数据，导致函数执行结果根据参数不同，结果也不同。</div>
            <div class="da r-font-two">3、一个函数可以设置 0 个或者多个参数，参数之间用逗号分隔。</div>
            <div class="da r-font-two m-tb-5px code-text p-b-one">
                <div class="m-tb-5px">// 定义函数方法：</div>
                <div class="da r-font-two m-tb-5px">function oSum(Num1, Num2){</div>
                <div class="da r-font-four m-tb-5px">console.log(Num1 + Num2);</div>
                <div class="da r-font-two m-tb-5px">}</div>
                <div class="m-tb-5px">// 函数调用方法：</div>
                <div class="da r-font-two m-tb-5px">oSum(1, 2); // 输出结果为： 3</div>
            </div>

            <!-- 模块 2-06 -->
            <div class="da r-font-two">&nbsp;</div>
            <div class="da r-font-two">&nbsp;</div>
            <div class="da c-red font-size-one">&gt;&gt; 函数的参数 2</div>
            <div class="da r-font-two">1、函数的参数根据书写位置不同，名称也不同。</div>
            <div class="da r-font-two c-orange">2、形式参数：定义的 () 内部的参数，叫做形式参数，本质就是变量，可以接收实际参数传递过来的数据。简称：形参。</div>
            <div class="da r-font-two c-orange">3、实际参数：调用的 () 内部的参数，叫做实际参数，本质就是传递的各种类型的数据，传递给每个形参，简称：实参。</div>
            <div class="da r-font-two">4、函数执行过程，伴随着传参的过程。</div>
            <div class="da r-font-two m-tb-5px code-text p-b-one">
                <div class="m-tb-5px">// 此处的 Num1 和 Num2 就是形式参数。</div>
                <div class="m-tb-5px">/* 函数执行时，形参接收实参传递过来的数据，相当于给形参变量进行隐形的赋值过程，参与程序时，结构体中的变量会使用形参接收到的数据。*/</div>
                <div class="da r-font-two m-tb-5px">function oSum(<span class="r-big">Num1</span>, <span
                        class="r-big">Num2</span>){</div>
                <div class="m-tb-5px">// 此处的 Num1 + Num2；变量部分用的就是形参接收到的实参的数据，整个过程就是一个传参的过程。</div>
                <div class="da r-font-four m-tb-5px">console.log(Num1 + Num2);</div>
                <div class="da r-font-two m-tb-5px">}</div>
                <div class="m-tb-5px">// 此处的1 和 2 分别对应 Num1 和 Num2</div>
                <div class="m-tb-5px">// 实际参数：函数调用时，会先传递给形参对应的位置。</div>
                <div class="da r-font-two m-tb-5px">oSum(<span class="r-big">1</span>, <span class="r-big">2</span>); //
                    输出结果为： 3</div>
            </div>

            <!-- 模块 2-07 -->
            <div class="da r-font-two">&nbsp;</div>
            <div class="da r-font-two">&nbsp;</div>
            <div class="da c-red font-size-one">&gt;&gt; 函数传参的优点</div>
            <div class="da r-font-two">1、不论是自己封装的函数还是他人封装的函数，我们只需要知道传递的是什么参数，执行什么功能，没必要知道内部的结构体是什么。</div>
            <div class="da r-font-two">2、一般自己封装的函数或是他人封装的函数都需要一个 API 接口说明，告诉用户参数需要传递什么类型的数据，实现什么功能。</div>

            <!-- 模块 2-08 -->
            <div class="da r-font-two">&nbsp;</div>
            <div class="da r-font-two">&nbsp;</div>
            <div class="da c-red font-size-one">&gt;&gt; 函数的返回值</div>
            <div class="da r-font-two">1、函数能够通过参数接收数据，也能够将函数执行结果返回一个值。</div>
            <div class="da r-font-two">2、利用函数内部的一个 <span class="r-big">return</span> 的关键字设置函数的返回值。</div>
            <div class="da r-font-two">3、作用1：函数内部如果结构体执行到一个 return 的关键字，会立即停止后面的代码的执行。</div>
            <div class="da r-font-two">4、作用3：可以在 return 关键字后面添加一个空格，空格后面任意定义一个数据字面量或者表达式，函数在执行完自身功能后，整体会被 return
                矮化成一个表达式，表达式必须求出一个值继续可以参与程序，表达式的值就是 return 后面的数据。</div>
            <div class="da r-font-two m-tb-5px code-text p-b-one">
                <div class="m-tb-5px">// 使用返回值的方法：</div>
                <div class="da r-font-two m-tb-5px">function oSum(Num1, Num2){</div>
                <div class="da r-font-four m-tb-5px">return Num1 + Num2;</div>
                <div class="da r-font-two m-tb-5px">}</div>
                <div class="m-tb-5px">// 函数调用方法：</div>
                <div class="da r-font-two m-tb-5px">console.log(oSum(1, 2)); // 输出结果为： 3</div>
            </div>
            <div class="da r-font-two">函数如果有返回值，执行结果可以当成普通数据参与程序。</div>
            <div class="da r-font-two">函数如果有返回值，可以作为一个普通数据赋值给一个变量，甚至赋值给奇谈函数的实际参数。</div>
            <div class="da r-font-two c-blue">※ 注意：如果函数没有设置 return 语句，那么函数有默认的返回值 undefined；如果函数使用 return 语句，但是 return
                后面没有任何值，那么函数的返回值也是 undefined。</div>
            <div class="da r-font-two m-tb-5px code-text p-b-one">
                <div class="m-tb-5px">// 使用返回值的方法：</div>
                <div class="da r-font-two m-tb-5px">function oSum(Num1, Num2){</div>
                <div class="da r-font-four m-tb-5px">return Num1 + Num2;</div>
                <div class="da r-font-two m-tb-5px">}</div>
                <div class="m-tb-5px">// 函数调用方法可以直接使用：</div>
                <div class="da r-font-two m-tb-5px">var oA = oSum(1, 2);</div>
                <div class="da r-font-two m-tb-5px">var oB = oSum(1, oSum(1, 2));</div>
            </div>

            <!-- 模块 2-09 -->
            <div class="da r-font-two">&nbsp;</div>
            <div class="da r-font-two">&nbsp;</div>
            <div class="da c-red font-size-one">&gt;&gt; 函数表达式</div>
            <div class="da r-font-two">1、函数表达式是函数定义的另一种方式。</div>
            <div class="da r-font-two">2、定义方法：就是将函数的定义、匿名函数赋值给一个变量。</div>
            <div class="da r-font-two">3、函数定义赋值给一个变量，相当于将函数整体矮化成了一个表达式。</div>
            <div class="da r-font-two">4、匿名函数：函数没有函数名。</div>
            <div class="da r-font-two">5、调用函数表达式，方法是给变量名加()执行，不能使用函数名加()执行。</div>
            <div class="da r-font-two m-tb-5px code-text p-b-one">
                <div class="m-tb-5px">// 函数表达式的方法：</div>
                <div class="m-tb-5px">// 方法 01：</div>
                <div class="da r-font-two m-tb-5px">var oText1 = function oName(Num1, Num2){</div>
                <div class="da r-font-four m-tb-5px">console.log(Num1);</div>
                <div class="da r-font-four m-tb-5px">console.log(Num2);</div>
                <div class="da r-font-two m-tb-5px">};</div>
                <div class="m-tb-5px">&nbsp;</div>
                <div class="m-tb-5px">&nbsp;</div>
                <div class="m-tb-5px">// 方法 02：</div>
                <div class="da r-font-two m-tb-5px">var oText2 = function (Num1, Num2){</div>
                <div class="da r-font-four m-tb-5px">console.log(Num1);</div>
                <div class="da r-font-four m-tb-5px">console.log(Num2);</div>
                <div class="da r-font-two m-tb-5px">};</div>
                <div class="m-tb-5px">&nbsp;</div>
                <div class="m-tb-5px">&nbsp;</div>
                <div class="m-tb-5px">// 调用方法：</div>
                <div class="da r-font-two m-tb-5px">oText1();</div>
                <div class="da r-font-two m-tb-5px">oText2();</div>
                <div class="m-tb-5px r-big">// ※ 注意：调用函数式，只能用变量名去调取，函数名调用无效，所以一般采取 02 匿名函数的方式。</div>
            </div>

            <!-- 模块 2-10 -->
            <div class="da r-font-two">&nbsp;</div>
            <div class="da r-font-two">&nbsp;</div>
            <div class="da c-red font-size-one">&gt;&gt; 函数的数据类型</div>
            <div class="da r-font-two">1、函数是一种单独的数据类型 Function。</div>
            <div class="da r-font-two">2、由于函数是一种数据类型，可以参与其他程序。</div>
            <div class="da r-font-two">3、栗砸1：可以把函数作为另一个函数的参数，在另一个函数中调用。</div>
            <div class="da r-font-two">4、栗砸2：可以把函数作为返回值从函数内部返回。</div>
            <div class="da r-font-two m-tb-5px code-text p-b-one">
                <div class="m-tb-5px">// 函数返回值：将一个函数当成另一个函数的返回值</div>
                <div class="da r-font-two m-tb-5px">function oText(oNum1){</div>
                <div class="da r-font-four m-tb-5px">var oNum = 100;</div>
                <div class="da r-font-four m-tb-5px">return function(){</div>
                <div class="da r-font-six m-tb-5px">alert(oNum + oNum1);</div>
                <div class="da r-font-four m-tb-5px">};</div>
                <div class="da r-font-two m-tb-5px">}</div>
            </div>
        </div>

        <!-- 第 03 组 -->
        <div class="demo-box">
            <!-- 提问部分 -->
            <div class="wen">
                <!-- 序号 -->
                <div class="num">Null</div>
                <!-- 问题 -->
                <div class="text-box">Arguments 对象</div>
            </div>
            <!-- 回答部分 -->
            <div class="da one-box c-red font-size-one">&gt;&gt; Arguments 对象简介</div>
            <div class="da r-font-two">1、JavaScript 中，arguments 对象是比较特别的一个对象，实际上是当前函数的一个内置属性。也就是说所有函数都内置了一个 arguments
                对象，arguments 对象中存储了传递的所有实参。arguments 是一个伪数组，因此可以进行遍历。</div>
            <div class="da r-font-two">2、函数的实参个数和形参个数可以不一致，所有的实参都会存储在函数内部的 arguments 类数组对象中。</div>
            <div class="da r-font-two m-tb-5px code-text p-b-one">
                <div class="m-tb-5px">// 例子：</div>
                <div class="da r-font-two m-tb-5px">function oSum(oNum1, oNum2, oNum3) {</div>
                <div class="m-tb-5px">// 条件分支语句，根据实参的个数分出不同的走向：</div>
                <div class="da r-font-four m-tb-5px">switch (arguments.length) {</div>
                <div class="da r-font-six m-tb-5px">case 1:</div>
                <div class="da r-font-eight m-tb-5px">return oNum1;</div>
                <div class="da r-font-eight m-tb-5px">break;</div>
                <div class="m-tb-5px">&nbsp;</div>
                <div class="da r-font-six m-tb-5px">case 2:</div>
                <div class="da r-font-eight m-tb-5px">return oNum1 + oNum2;</div>
                <div class="da r-font-eight m-tb-5px">break;</div>
                <div class="m-tb-5px">&nbsp;</div>
                <div class="da r-font-six m-tb-5px">case 3:</div>
                <div class="m-tb-5px r-big">// 三元表达式：如果 oNum1 大于 oNum2 则 oNum1 + oNum3 否则 oNum2 + oNum3</div>
                <div class="da r-font-eight m-tb-5px">return oNum1 &gt; oNum2 ? oNum1 + oNum3 : oNum2 + oNum3;</div>
                <div class="da r-font-eight m-tb-5px">break;</div>
                <div class="m-tb-5px">&nbsp;</div>
                <div class="da r-font-six m-tb-5px">default:</div>
                <div class="da r-font-eight m-tb-5px">throw new Error("参数个数不能超过 3 个");</div>
                <div class="da r-font-four m-tb-5px">}</div>
                <div class="da r-font-two m-tb-5px">}</div>
            </div>
        </div>

        <!-- 第 04 组 -->
        <div class="demo-box">
            <!-- 提问部分 -->
            <div class="wen">
                <!-- 序号 -->
                <div class="num">Null</div>
                <!-- 问题 -->
                <div class="text-box">函数递归</div>
            </div>
            <!-- 回答部分 -->
            <div class="da one-box c-red font-size-one">&gt;&gt; 函数递归现象</div>
            <div class="da r-font-two">1、函数内部可以通过函数名调用函数自身的方式，就是函数递归现象。</div>
            <div class="da r-font-two">2、递归的次数太多容易出现错误：超出计算机的计算最大能力。</div>
            <div class="da r-font-two">3、更多时候使用递归去解决一些数学中的现象。</div>
            <div class="da r-font-two">※ 如：可以输出斐波那契数列的某一项的值。</div>
            <div class="da r-font-two m-tb-5px code-text p-b-one">
                <div class="m-tb-5px">// 例子：</div>
                <div class="da r-font-two m-tb-5px">function oSum(oNum1) {</div>
                <div class="da r-font-four m-tb-5px">if(oNum1 === 1) {</div>
                <div class="da r-font-six m-tb-5px">return 1;</div>
                <div class="da r-font-four m-tb-5px">} else {</div>
                <div class="da r-font-six m-tb-5px">return oNum1 + oSum(oNum - 1);</div>
                <div class="da r-font-four m-tb-5px">}</div>
                <div class="da r-font-two m-tb-5px">}</div>

                <!-- 例子2 -->
                <div class="m-tb-5px">&nbsp;</div>
                <div class="m-tb-5px">&nbsp;</div>
                <div class="m-tb-5px">// 例子2：</div>
                <div class="da r-font-two m-tb-5px">function oDemo(oNum1) {</div>
                <div class="da r-font-four m-tb-5px">if(oNum1 === 1 || oNum1 === 2){</div>
                <div class="da r-font-six m-tb-5px">return 1;</div>
                <div class="da r-font-four m-tb-5px">} else {</div>
                <div class="da r-font-six m-tb-5px">return oDemo(oNum1 - 1) + oDemo(oNum1 - 2);</div>
                <div class="da r-font-four m-tb-5px">}</div>
                <div class="da r-font-two m-tb-5px">}</div>
                <div class="da r-font-two m-tb-5px">console.log(oDemo(1))</div>
            </div>
        </div>

        <!-- 第 05 组 -->
        <div class="demo-box">
            <!-- 提问部分 -->
            <div class="wen">
                <!-- 序号 -->
                <div class="num">Null</div>
                <!-- 问题 -->
                <div class="text-box">作用域</div>
            </div>
            <!-- 回答部分 -->
            <div class="da one-box c-red font-size-one">&gt;&gt; 作用域简介</div>
            <div class="da r-font-two">1、作用域：变量可以其作用的范围。</div>
            <div class="da r-font-two">2、若一个变量被定义在一个函数的内部，那么这个变量将只能在该函数内部被访问到，而在该函数外部是不能使用这个变量的，那么这个函数就是该变量的作用域。</div>
            <div class="da r-font-two">3、任何一对大括号 {} 中的结构体都属于一个块，在这之中定义的所有变量在代码块外都是不可见的，我们称之为：块级作用域。</div>
            <div class="da r-font-two">4、在 ES6 之前没有块级作用域的概念，只有函数作用域。</div>
            <div>&nbsp;</div>
            <div>&nbsp;</div>
            <div class="da one-box c-red font-size-one">&gt;&gt; 全局变量 & 局部变量</div>
            <div class="da r-font-two">1、局部变量：定义在函数内部的变量，只能在函数作用域内才能被访问到，在外面没有定义。</div>
            <div class="da r-font-two">2、全局变量：也是一种变量，定义在全局的变量，作用域范围是<span class="b-big-solid">全局</span>，在整个 JavaScript
                程序任意位置都能被访问到。</div>
            <div class="da r-font-two">3、变量在出作用域后会被销毁，全局变量则只有关闭网页或浏览器之后才会销毁。</div>
            <div class="da r-font-two o-big">※
                遮蔽效应：程序在遇到一个变量时，使用时作用域查找顺序，不同层次的函数内都有可能定义相同名的变量，一个变量在使用时，会优先从自己所在层的作用域查找变量，如果当前层没有变量定义则会按照从本层依次向外查找，直到找到第一个此名称的变量定义为止。整个过程中会发生内层变量遮蔽外层变量的效果，这种效果叫做：遮蔽效应。
            </div>
            <div>&nbsp;</div>
            <div>&nbsp;</div>
            <div class="da one-box c-red font-size-one">&gt;&gt; 不写 Var 关键字的影响</div>
            <div class="da r-font-two">1、在函数内部想要定义新的变量。如果不加关键字 Var，相当于定义的全局变量。如果全局也有相同的标识符，会被函数内部的变量影响，造成局部变量污染全局变量。
            </div>
            <div class="da r-font-two r-big">※ 注意：每次定义变量时都必须写 Var 关键字，否则就会被定义为全局变量，污染全局。</div>
        </div>

        <!-- 第 06 组 -->
        <div class="demo-box">
            <!-- 提问部分 -->
            <div class="wen">
                <!-- 序号 -->
                <div class="num">Null</div>
                <!-- 问题 -->
                <div class="text-box">预解析</div>
            </div>
            <!-- 回答部分 -->
            <!-- * 预解析简介 开始 -->
            <div class="da one-box c-red font-size-one">&gt;&gt; 预解析简介</div>
            <div class="da r-font-two">1、JavaScript 代码的执行是由浏览器中的 JavaScript 解析器来执行的。JavaScript 解析器在执行 JavaScript
                代码的时候，会分为两个过程：1、预解析过程；2、代码执行过程。</div>
            <div class="da r-font-two">2、预解析过程</div>
            <div class="da r-font-four">①、把变量的声明提升到当前作用域的最前面，只会提升声明，不会提升赋值。</div>
            <div class="da r-font-four">②、把函数的声明提升到当前作用域的最前面，只会提升声明，不会提升调用。</div>
            <div class="da r-font-four">③、先提升 Var，再提升 Function。</div>
            <div class="da r-font-two">3、JavaScript 的执行过程：在预解析后，根据新的代码顺序，从上往下按照既定规律执行 Js 代码。</div>
            <!-- ! 预解析简介 结束 -->

            <!-- * 变量声明提升 开始 -->
            <div>&nbsp;</div>
            <div>&nbsp;</div>
            <div class="da c-red font-size-one">&gt;&gt; 变量声明提升</div>
            <div class="da r-font-two">1、在预解析过程中，所有定义的变量，都会将生命的过程提升到所在的作用域最上面，在以后的代码执行过程中，按照先后顺序会先执行被提升的声明变量过程。</div>
            <div class="da r-font-two">2、提升过程中，只提升声明过程，不提升变量赋值，相当于变量定义未赋值，变量内存储 Undefined 值。</div>
            <div class="da r-font-two">3、在 Js 中会出现一种现象，在前面调用后定义的变量，不会报错，只会使用 Undefined 值。</div>
            <!-- ! 变量声明提升 结束 -->

            <!-- * 函数声明提升 开始 -->
            <div>&nbsp;</div>
            <div>&nbsp;</div>
            <div class="da c-red font-size-one">&gt;&gt; 函数声明提升</div>
            <div class="da r-font-two">1、在预解析过程中，所有定义的函数，都会将声明的过程提升到所在的 作用域最上面，在后面的代码执行过程中，按照先后顺序会先执行被提升的函数声明过程。</div>
            <div class="da r-font-two">2、在于解析之后的代码执行过程中，函数定义过程已经在最开始就会执行，一旦函数定义成功，后续就可以直接调用函数。</div>
            <div class="da r-font-two">3、在 Js 中会出现一种现象，在前面调用后定义的函数，不会报错，且能正常执行函数内部的代码。</div>
            <!-- ! 函数声明提升 结束 -->

            <!-- * 提升顺序 开始 -->
            <div>&nbsp;</div>
            <div>&nbsp;</div>
            <div class="da c-red font-size-one">&gt;&gt; 提升顺序</div>
            <div class="da r-font-two">1、预解析过程中，先提升 Var 变脸声明，再提升 Function 函数声明。</div>
            <div class="da r-font-two">2、假设出现变量名和函数名相同，那么后提升的函数名标识符会覆盖掉先提升的变量名，在后续代码中出现调用标识符时，内部是函数的定义过程，而不是 Undefined。
            </div>
            <div class="da r-font-two">3、如果调用标识符的过程在源代码<span class="r-big-solid">函数</span>和<span
                    class="r-big">变量</span>定义后面，相当于函数名覆盖了一次变量名，结果在执行到变量赋值时，又被新的值给覆盖了函数的值，那么在后面再次调用标识符，用的就是变量存的新值。</div>
            <div class="da r-font-two g-big">※ 建议：不要书写相同的标识符给变量名或函数名，避免出现覆盖。</div>
            <!-- * 提升顺序 开始 -->

            <!-- * 函数表达式的提升 开始 -->
            <div>&nbsp;</div>
            <div>&nbsp;</div>
            <div class="da c-red font-size-one">&gt;&gt; 函数表达式的提升</div>
            <div class="da r-font-two">在预解析过程中，函数表达式进行的是<span class="b-big">变量声明提升</span>，而不是函数声明提升。提升后变量内部存的是一个
                Undefined。在前面进行函数调用，数据类型会提示错误。</div>
            <div class="da r-font-two g-big">※ 建议：定义函数时，最好使用 function 关键字定义方式，这样函数声明提升可以永远生效。</div>
            <!-- ! 函数表达式的提升 结束 -->

            <!-- * 函数表达式的应用 开始 -->
            <div>&nbsp;</div>
            <div>&nbsp;</div>
            <div class="da c-red font-size-one">&gt;&gt; 函数表达式的应用</div>
            <div class="da r-font-two">函数声明提升可以用于调整代码的顺序，将大段的定义过程放到代码最后，但不影响代码的执行效果。</div>
            <!-- ! 函数表达式的应用 结束 -->
        </div>

        <!-- 第 07 组 -->
        <div class="demo-box">
            <!-- 提问部分 -->
            <div class="wen">
                <!-- 序号 -->
                <div class="num">Null</div>
                <!-- 问题 -->
                <div class="text-box">IIFE 自调用函数</div>
            </div>
            <!-- 回答部分 -->
            <div class="da one-box c-red font-size-one">&gt;&gt; IIFE 自调用函数简介</div>
            <div class="da r-font-two">1、IIFE 是指：Immediately-Invoked Function
                Expression，又称：即时调用的函数表达式，也叫做自调用函数，表示函数在定义时就立即调用。</div>
            <div class="da r-font-two">2、函数调用方法：<span class="b-big">函数名</span>或<span
                    class="b-big">函数表达式</span>的变量名后面加小括号()运算符。</div>
            <div class="da r-font-two">
                3、函数名定义的形式不能实现立即执行自调用，函数使用函数表达式形式可以实现立即执行，原因是因为函数表达式定义过程中，讲一个函数矮化成了一个表达式，后面加小括号()运算符就可以立即执行。</div>
            <div class="da r-font-two g-big">※ 启发：如果想实现 IIFE，可以想办法将函数矮化成表达式。</div>
            <div>&nbsp;</div>

            <!-- * 代码部分 开始 -->
            <div class="da r-font-two m-tb-5px code-text p-b-one">
                <div class="m-tb-5px r-big-solid">// 关键自定义的方式，不可以被立即执行</div>
                <div class="da r-font-two m-tb-5px"> function oDemo1() {</div>
                <div class="da r-font-four m-tb-5px">console.log(0);</div>
                <div class="da r-font-two m-tb-5px">}(<span class="r-big">)</span>;</div>
                <div class="m-tb-5px r-big-solid">// 会在执行前的编辑工具中报错！然后再在浏览器中报：</div>
                <div class="m-tb-5px r-big-solid">// Uncaught SyntaxError: expected expression, got ')'</div>
                <div class="m-tb-5px r-big-solid">// 出现无法捕获的语法错误：未能找到预期的表达式中的'）'</div>
                <div>&nbsp;</div>
                <div>&nbsp;</div>
                <div class="m-tb-5px yg-big-solid">// 函数表达式方式，可以在定义时被立即执行</div>
                <div class="da r-font-two m-tb-5px">var oDemo1 = function () {</div>
                <div class="da r-font-four m-tb-5px">console.log(0);</div>
                <div class="da r-font-two m-tb-5px">}();</div>
                <div>&nbsp;</div>
            </div>
            <!-- ! 代码部分 结束 -->

            <div>&nbsp;</div>
            <div class="da r-font-two">4、函数矮化成表达式，就可以实现自调用。</div>
            <div class="da r-font-two">5、函数矮化成表达式的方法，可以让函数参与一些运算，也就是说给函数前面加一些运算符。</div>
            <div class="da r-font-four">数学运算符：加（+）、减（-）、小括号（()）</div>
            <div class="da r-font-four">逻辑运算符：非（!）</div>
            <div class="da r-font-two">6、IIFE 结构可以封锁函数的作用域，在结构外面是不能调用函数的。(相当于一次性函数，不可再被调用。)</div>
            <div class="da r-font-two">7、IIFE 最常用的是小括号 () 运算符，而且函数可以不写函数名，使用匿名函数。</div>
            <div>&nbsp;</div>

            <!-- * 代码部分 开始 -->
            <div class="da r-font-two m-tb-5px code-text p-b-one">
                <div class="m-tb-5px r-big-solid">// 常用的 IIFE</div>
                <div class="da r-font-two m-tb-5px"> (function (a) {</div>
                <div class="da r-font-four m-tb-5px">console.log(a);</div>
                <div class="da r-font-two m-tb-5px">})(1);</div>
            </div>
            <!-- ! 代码部分 结束 -->
        </div>

        <!-- 第 08 组 -->
        <div class="demo-box">
            <!-- 提问部分 -->
            <div class="wen">
                <!-- 序号 -->
                <div class="num">Null</div>
                <!-- 问题 -->
                <div class="text-box">对象</div>
            </div>
            <!-- 回答部分 -->
            <!-- * 对象的作用 开始 -->
            <div class="da one-box c-red font-size-one">&gt;&gt; 对象的作用</div>
            <div class="da r-font-two">对象可以自定义名称存储一些列无序的相关数据。</div>
            <!-- ! 对象的作用 结束 -->

            <!-- * 对象的简介 开始 -->
            <div>&nbsp;</div>
            <div>&nbsp;</div>
            <div class="da one-box c-red font-size-one">&gt;&gt; 对象的简介</div>
            <div class="da r-font-two">1、JavaScript 中的对象：</div>
            <div class="da r-font-four">①、JavaScript 的对象其实就类似于生活中对象的一个抽象。</div>
            <div class="da r-font-four">②、JavaScript 的对象是无序属性的集合。</div>
            <div class="da r-font-two">2、其属性可以包含：基本值、对象或是函数。对象就是一组没有顺序的值。我们可以把 JavaScript 中的对象想象成键值对，其中值可以是数据和函数。</div>
            <div class="da r-font-two">3、对象的行为和特征：</div>
            <div class="da r-font-four">①特征 -- 在对象中用属性表示</div>
            <div class="da r-font-four">②行为 -- 在对象中用方法表示</div>
            <!-- ! 对象的简介 结束 -->

            <!-- * 对象字面量 开始 -->
            <div>&nbsp;</div>
            <div>&nbsp;</div>
            <div class="da one-box c-red font-size-one">&gt;&gt; 对象字面量</div>
            <div class="da r-font-two">1、创建一个对象最简单的方式就是使用对象字面量赋值给变量。类似于数组。</div>
            <div class="da r-font-two">2、对象字面量语法：{}</div>
            <div class="da r-font-two">3、内部可以存放多条数据，数据与数据之间用逗号分隔，最后一个除外（不要加逗号）。</div>
            <div class="da r-font-two">4、每条数据都是有属性名和属性值组成的，键值对写法：K:V</div>
            <div class="da r-font-two">5、K：属性名</div>
            <div class="da r-font-two">6、V：属性值，可以是任何类型的数据，例如：简单类型的数据、函数、对象等。</div>
            <div class="da r-font-two">※ 属性：对象的描述性特证，一般是名词，相当于定义在对象内部的变量。</div>
            <div class="da r-font-two">※ 方法：对象的行为和功能，一般是动词，定义在对象中的函数。</div>
            <div>&nbsp;</div>

            <!-- * 代码部分 开始 -->
            <div class="da r-font-two m-tb-5px code-text p-b-one">
                <div class="m-tb-5px">// 创建对象字面量方式</div>
                <div class="da r-font-two m-tb-5px"> var oData1 = {</div>
                <div class="da r-font-four m-tb-5px">name: "前端开发",</div>
                <div class="da r-font-four m-tb-5px">age: 18,</div>
                <div class="da r-font-four m-tb-5px">sex: "男",</div>
                <div class="da r-font-four m-tb-5px">say: function() {</div>
                <div class="da r-font-six m-tb-5px">console.log("Hello World");</div>
                <div class="da r-font-four m-tb-5px">}</div>
                <div class="da r-font-two m-tb-5px">};</div>
            </div>
            <!-- ! 代码部分 结束 -->

            <!-- ! 对象字面量 结束 -->

            <!-- * 调用对象内部属性和方法 开始 -->
            <div>&nbsp;</div>
            <div>&nbsp;</div>
            <div class="da one-box c-red font-size-one">&gt;&gt; 调用对象内部属性和方法</div>
            <div class="da r-font-two">1、用对象的变量名打点调用某个属性名，得到属性值。</div>
            <div class="da r-font-two">2、在对象内部用 this 打点调用属性名。this 代替对象。</div>
            <div class="da r-font-two">3、用对象的变量名后面加中括号[]调用，中括号[]内部是字符串格式的属性名。</div>
            <div class="da r-font-two">4、调用方法时，需要在方法名后面加小括号()执行。</div>

            <!-- * 代码部分 开始 -->
            <div class="da r-font-two m-tb-5px code-text p-b-one">
                <div class="m-tb-5px">// 创建对象字面量方式</div>
                <div class="da r-font-two m-tb-5px">var oData1 = {</div>
                <div class="da r-font-four m-tb-5px">name: "前端开发",</div>
                <div class="da r-font-four m-tb-5px">age: 18,</div>
                <div class="da r-font-four m-tb-5px">sex: "男",</div>
                <div class="da r-font-four m-tb-5px">say: function() {</div>
                <div class="da r-font-six m-tb-5px">console.log("Hello World");</div>
                <div class="da r-font-four m-tb-5px">}</div>
                <div class="da r-font-two m-tb-5px">};</div>
                <div>&nbsp;</div>
                <div class="m-tb-5px">// 调用方法（一）点调用</div>
                <div class="da r-font-two m-tb-5px">console.log(oData1.name);</div>
                <div class="da r-font-two m-tb-5px">oData1.say();&nbsp;&nbsp;// 调用内部函数</div>
                <div>&nbsp;</div>
                <div class="m-tb-5px">// 调用方法（二）：中括号调用</div>
                <div class="da r-font-two m-tb-5px">console.log(oData1["name"]);</div>
                <div class="da r-font-two m-tb-5px">oData1["say"]();&nbsp;&nbsp;// 调用内部函数</div>
                <div>&nbsp;</div>
                <div class="m-tb-5px">// 调用方法（三）：内部调用</div>
                <div class="da r-font-two m-tb-5px">var oData1 = {</div>
                <div class="da r-font-four m-tb-5px">name: "前端开发",</div>
                <div class="da r-font-four m-tb-5px">age: 18,</div>
                <div class="da r-font-four m-tb-5px">sex: "男",</div>
                <div class="da r-font-four m-tb-5px">say: function() {</div>
                <div class="da r-font-six m-tb-5px">console.log(this.name + "运行了：Hello World");</div>
                <div class="da r-font-four m-tb-5px">}</div>
                <div class="da r-font-two m-tb-5px">};</div>
                <div class="da r-font-two m-tb-5px">oData1.say();&nbsp;&nbsp;// 调用内部函数</div>
                <div class="m-tb-5px">// 执行结果为：前端开发运行了：Hello World</div>
            </div>
            <!-- ! 代码部分 结束 -->

            <!-- ! 调用对象内部属性和方法 结束 -->

            <!-- * 更改对象内部属性和方法 开始 -->
            <div>&nbsp;</div>
            <div>&nbsp;</div>
            <div class="da one-box c-red font-size-one">&gt;&gt; 更改对象内部属性和方法</div>
            <div>&nbsp;</div>
            <!-- 项目 01 -->
            <div class="da r-font-two">1、<span class="o-big">更改属性的属性值方法：</span>先调用属性，再用等号赋上新的值。</div>
            <div class="da r-font-two m-tb-5px code-text p-b-one">
                <div class="da r-font-two m-tb-5px">oData.age = 19;</div>
            </div>

            <!-- 项目 02 -->
            <div>&nbsp;</div>
            <div class="da r-font-two">2、<span class="g-big">新增一条属性：</span>使用点语法或者中括号[]方法直接定义新的属性，并用等号赋值。</div>
            <div class="da r-font-two m-tb-5px code-text p-b-one">
                <div class="da r-font-two m-tb-5px">oData.id = "No.001";</div>
            </div>

            <!-- 项目 03 -->
            <div>&nbsp;</div>
            <div class="da r-font-two">3、<span class="r-big">删除一条属性：</span>使用一个 delete 关键字，空格后面加属性调用。</div>
            <div class="da r-font-two m-tb-5px code-text p-b-one">
                <div class="da r-font-two m-tb-5px">delete oData.age;</div>
            </div>

            <!-- ! 更改对象内部属性和方法 结束 -->

            <!-- * 新建对象： new Object() 开始 -->
            <div>&nbsp;</div>
            <div>&nbsp;</div>
            <div class="da one-box c-red font-size-one">&gt;&gt; new Object() 创建对象</div>
            <div class="da r-font-two">※ Object() 构造函数，是一种特殊的函数。主要用来再创造对象时初始化对象，即为对象成员变量赋予初始值，总与 new 运算符一起使用在创建对象的语句中。
            </div>
            <div class="da r-font-four">1、构造函数用于创建一类对象，首字母要大写。</div>
            <div class="da r-font-four">2、构造函数要和 new 一起使用才有意义。</div>

            <!-- * 代码部分 开始 -->
            <div>&nbsp;</div>
            <div class="da r-font-two m-tb-5px code-text p-b-one">
                <div class="da m-tb-5px nocode-big">// new Object() 方法</div>
                <div class="da r-font-two m-tb-5px">var oDemo1 = new Object();</div>
                <div>&nbsp;</div>
                <div class="da m-tb-5px nocode-big">// 添加 属性 和 方法</div>
                <div class="da r-font-two m-tb-5px">oDemo1.name = "前端开发";</div>
                <div class="da r-font-two m-tb-5px">oDemo1.say = function(){</div>
                <div class="da r-font-four m-tb-5px">console.log("Hello World");</div>
                <div class="da r-font-two m-tb-5px">};</div>
                <div>&nbsp;</div>
                <div class="da m-tb-5px nocode-big">/* </div>
                <div class="da m-tb-5px r-big">! 总结：</div>
                <div class="da m-tb-5px o-big">1、new 会在内存中创建一个新的空对象。</div>
                <div class="da m-tb-5px o-big">2、new 会让 this 指向这个新的对象。</div>
                <div class="da m-tb-5px o-big">3、执行构造函数。目的：给这个新对象添加属性和方法。</div>
                <div class="da m-tb-5px o-big">4、new 会返回这个新对象。</div>
                <div class="da m-tb-5px nocode-big">*/</div>

                <!-- * 方法（一）：工厂方法 开始 -->
                <div>&nbsp;</div>
                <div>&nbsp;</div>
                <div class="da m-tb-5px nocode-big">// 方法（一）：工厂方法</div>
                <div class="da m-tb-5px nocode-big">// 创建一个方法工厂， 内部相当于对 new Object() 方法的一个封装</div>
                <div class="da r-font-two m-tb-5px">function createPerson(name, age, sex) {</div>
                <div>&nbsp;</div>
                <div class="da m-tb-5px r-font-four nocode-big">// 创造一个空对象</div>
                <div class="da r-font-four m-tb-5px">var oDemo1 = new Object();</div>
                <div>&nbsp;</div>
                <div class="da m-tb-5px r-font-four nocode-big">// 添加 属性 和 方法</div>
                <div class="da r-font-four m-tb-5px">oDemo1.name = name;</div>
                <div class="da r-font-four m-tb-5px">oDemo1.age = age;</div>
                <div class="da r-font-four m-tb-5px">oDemo1.sex = sex;</div>
                <div class="da r-font-four m-tb-5px">oDemo1.say = function(){</div>
                <div class="da r-font-six m-tb-5px">console.log("Hello World");</div>
                <div class="da r-font-four m-tb-5px">};</div>
                <div>&nbsp;</div>
                <div class="da m-tb-5px r-font-four nocode-big">//将对象作为函数的返回值</div>
                <div class="da r-font-four m-tb-5px">return oDemo1;</div>
                <div class="da r-font-two m-tb-5px">}</div>
                <div>&nbsp;</div>
                <div class="da m-tb-5px nocode-big">// 当想创建一个新的对象，可以直接调用工厂函数</div>
                <div class="da r-font-two m-tb-5px">var oData1 = createPerson("前端开发", 18, "男");</div>
                <!-- ! 方法（一）：工厂方法 结束 -->

                <!-- * 方法（二）：自定义构造函数 开始 -->
                <div>&nbsp;</div>
                <div>&nbsp;</div>
                <div class="da m-tb-5px nocode-big">// 方法（二）：自定义构造函数</div>
                <div class="da m-tb-5px nocode-big">/*</div>
                <div class="da m-tb-5px r-font-two o-big">比工厂方法更加简便</div>
                <div class="da m-tb-5px r-font-two o-big">自定义一个创建具体对象的构造函数，函数内部不需要 new 一个结构函数的过程，直接使用 this
                    代替对象进行属性和方法的书写，也不需要 return 一个返回值</div>
                <div class="da m-tb-5px r-font-two gy-big">※ 注意：构造函数的函数名首字母需要大写，区别于其他普通函数名</div>
                <div class="da m-tb-5px nocode-big">*/</div>
                <div>&nbsp;</div>
                <div class="da m-tb-5px nocode-big">// 创建一个自定义构造函数</div>
                <div class="da r-font-two m-tb-5px">function createPerson(name, age, sex) {</div>
                <div>&nbsp;</div>
                <div class="da m-tb-5px r-font-four nocode-big">// 添加 属性 和 方法</div>
                <div class="da r-font-four m-tb-5px">this.name = name;</div>
                <div class="da r-font-four m-tb-5px">this.age = age;</div>
                <div class="da r-font-four m-tb-5px">this.sex = sex;</div>
                <div class="da r-font-four m-tb-5px">this.say = function(){</div>
                <div class="da r-font-six m-tb-5px">console.log("Hello World");</div>
                <div class="da r-font-four m-tb-5px">};</div>
                <div class="da r-font-two m-tb-5px">}</div>
                <div>&nbsp;</div>
                <div class="da m-tb-5px nocode-big">// 当想创建一个新的对象，可以直接调用工厂函数</div>
                <div class="da r-font-two m-tb-5px">var oData1 = new createPerson("前端开发", 18, "男");</div>
                <!-- ! 方法（二）：自定义构造函数 结束 -->
            </div>

            <!-- ! 代码部分 结束 -->

            <!-- ! 新建对象： new Object() 结束 -->

            <!-- * 对象遍历 开始 -->
            <div>&nbsp;</div>
            <div>&nbsp;</div>
            <div class="da one-box c-red font-size-one">&gt;&gt; 对象遍历</div>
            <div class="da r-font-two">1、for in 循环也是循环的一种，专门用来遍历对象，内部会定义一个 k 变量，k
                变量在每次循环时会从第一个开始接收属性名，一直接收到最后一条属性名，执行完毕后自动跳出循环。</div>
            <div class="da r-font-two">2、简单的循环遍历方法：输出没意向的 属性名 和 属性值。</div>
            <div>&nbsp;</div>
            <div class="da r-font-two m-tb-5px code-text p-b-one">
                <div class="da r-font-two m-tb-5px">for(var k in obj){</div>
                <div class="da r-font-four m-tb-5px">console.log(k + "项的属性值是：" + obj[k]);</div>
                <div class="da r-font-two m-tb-5px">}</div>
            </div>
            <!-- ! 对象遍历 结束 -->
        </div>

        <!-- 第 09 组 -->
        <div class="demo-box">
            <!-- 提问部分 -->
            <div class="wen">
                <!-- 序号 -->
                <div class="num">Null</div>
                <!-- 问题 -->
                <div class="text-box">标题</div>
            </div>
            <!-- 回答部分 -->
            <!-- * 简单类型 开始 -->
            <div class="da one-box c-red font-size-one">&gt;&gt; 简单类型</div>
            <div class="da r-font-two">1、简单类型，又叫做：值类型。</div>
            <div class="da r-font-two">2、值类型：简单数据类型，基本数据类型，在存储时，变量中存储的是值本身。</div>
            <div class="da r-font-two">
                3、若一个变量中存储的是一个简单类型的数据，那么变量中存储的值则是它本身，如果这时我们又将它赋值给了另一个变量，则是将内部的值赋了过去相当于复制了一份并赋给了另一个变量，即使现在两个变量的值相等但这两个变量之间毫无联系，一个变化另一个不会受到影响而同时变化。
            </div>

            <!-- * 绘图 开始 -->
            <div class="da flex-box" data-tag-id="tannjunntaipu">
                <div class="flex-box-one">
                    <div class="img-box">
                        <div class="zhan">栈</div>
                        <div>oNum1 = 10</div>
                        <div>oNum2 = 10</div>
                    </div>
                </div>
                <div class="flex-box-two">
                    <p>var oNum1 = 10;</p>
                    <p>var oNum2 = oNum1;</p>
                </div>
            </div>
            <!-- ! 绘图 结束 -->
            <style type="text/css">
                /* * 设置本部分的图片整体样式 开始 */
                div.da.flex-box[data-tag-id="tannjunntaipu"] {
                    align-items: center;
                    width: 100% !important;
                    height: 400px;
                    margin: 0 !important;
                    padding: 0 !important;
                }

                /* ! 设置本部分的图片整体样式 结束 */

                /* * 设置左半边样式 开始 */
                div.da.flex-box[data-tag-id="tannjunntaipu"] .flex-box-one {
                    display: flex;
                    justify-content: center;
                    width: 50%;
                }

                div.da.flex-box[data-tag-id="tannjunntaipu"] .flex-box-one .img-box {
                    position: relative;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    justify-content: flex-end;
                    width: 150px;
                    height: 300px;
                    background-color: skyblue;
                }

                div.da.flex-box[data-tag-id="tannjunntaipu"] .flex-box-one .img-box>div:not(.zhan) {
                    width: 100%;
                    height: 45px;
                    line-height: 45px;
                    text-align: center;
                    background-color: orange;
                    box-sizing: border-box;
                    border: 1px solid #000;
                }

                div.da.flex-box[data-tag-id="tannjunntaipu"] .flex-box-one .img-box>div.zhan {
                    position: absolute;
                    left: 0;
                    top: 0;
                    width: 100%;
                    height: 45px;
                    line-height: 45px;
                    text-align: center;
                }

                /* ! 设置左半边样式 结束 */

                /* * 设置右半边样式 开始 */
                div.da.flex-box[data-tag-id="tannjunntaipu"] .flex-box-two {
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    justify-content: center;
                    flex-wrap: wrap;
                    width: 50%;
                }

                /* ! 设置右半边样式 结束 */
            </style>
            <!-- ! 简单类型 结束 -->


            <!-- * 复杂类型 开始 -->
            <div>&nbsp;</div>
            <div>&nbsp;</div>
            <div class="da one-box c-red font-size-one">&gt;&gt; 复杂类型</div>
            <div class="da r-font-two">1、复杂类型，又叫做：引用类型。</div>
            <div class="da r-font-two">2、引用类型：复杂数据类型，在存储时，变量中存储的仅仅是引用的地址。</div>

            <!-- * 绘图 开始 -->

            <div class="da flex-box" data-tag-id="fukuzatsunataipu">
                <div class="box-title">
                    <p>var Demo = new person('zs', 18, 1000);</p>
                    <p>var Demo1 = Demo;</p>
                </div>
                <div class="box-img">
                    <div class="box-img-one">
                        <div class="w-box">
                            <span>
                                栈
                            </span>
                            <div class="img-one-shang" title="Demo1" onclick="alert('这是 Demo1；\n指向右侧 Dome 对象')">0x0011bb
                            </div>
                            <div class="img-one-xia" title="Demo" onclick="alert('这是 Demo；\n指向右侧 Dome 对象')">0x0011bb
                            </div>
                        </div>
                    </div>
                    <div class="box-img-two">
                        <div class="w-box">
                            <span>
                                堆
                            </span>
                            <div class="img-two-yuan">
                                Demo 对象
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- ! 绘图 结束 -->
            <style>
                /* 整体样式 */
                div[data-tag-id="fukuzatsunataipu"] {
                    flex-direction: column;
                    align-items: center;
                    width: 100% !important;
                    height: 500px;
                    margin: 0 !important;
                    padding: 0 !important;
                }

                /* 上侧文字样式 */
                div[data-tag-id="fukuzatsunataipu"] .box-title {
                    display: flex;
                    flex-direction: column;
                    justify-content: space-evenly;
                    height: 20%;
                }

                /* 文字中的 p 标签 */
                div[data-tag-id="fukuzatsunataipu"] .box-title>p {
                    margin: 0;
                }

                /* 下侧文字样式 */
                div[data-tag-id="fukuzatsunataipu"] .box-img {
                    display: flex;
                    width: 100%;
                    height: 80%;
                }

                /* 图片左侧大盒子 */
                div[data-tag-id="fukuzatsunataipu"] .box-img .box-img-one {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    width: 30%;
                    height: 100%;
                }

                /* 左侧图片样式 外侧盒子 */
                div[data-tag-id="fukuzatsunataipu"] .box-img .box-img-one div.w-box {
                    position: relative;
                    display: flex;
                    flex-direction: column;
                    justify-content: flex-end;
                    align-items: center;
                    width: 50%;
                    height: 100%;
                    box-sizing: border-box;
                    background-color: aqua;
                    border: 1px solid #000;
                }

                /* 内部盒子 * 2 */
                div[data-tag-id="fukuzatsunataipu"] .box-img .box-img-one div.w-box div[class^=img-one] {
                    width: 100%;
                    height: 15%;
                    line-height: 60px;
                    text-align: center;
                    background-color: orange;
                    border: 1px solid #000;
                    box-sizing: border-box;
                    cursor: pointer;
                }

                /* 修改 Span 标签样式 */
                div[data-tag-id="fukuzatsunataipu"] .box-img .box-img-one div.w-box span {
                    position: absolute;
                    top: 50%;
                }

                /* ! 下面 左侧盒子 结束 */

                div[data-tag-id="fukuzatsunataipu"] .box-img .box-img-two {
                    display: flex;
                    justify-content: center;
                    width: 70%;
                    height: 100%;
                }

                div[data-tag-id="fukuzatsunataipu"] .box-img .box-img-two .w-box {
                    position: relative;
                    width: 50%;
                    height: 100%;
                    background-color: aqua;
                    border: 1px solid #000;
                    box-sizing: border-box;
                }

                div[data-tag-id="fukuzatsunataipu"] .box-img .box-img-two .w-box span {
                    position: absolute;
                    left: 50%;
                    top: 50%;
                }

                div[data-tag-id="fukuzatsunataipu"] .box-img .box-img-two .w-box .img-two-yuan {
                    position: absolute;
                    left: 20%;
                    bottom: 40px;
                    width: 150px;
                    height: 100px;
                    line-height: 100px;
                    background-color: orange;
                    border-radius: 50%;
                    overflow: hidden;
                    text-align: center;
                    border: 1px solid #000;
                }
            </style>
            <!-- ! 复杂类型 结束 -->

            <!-- * 后端开发：堆和栈 开始 -->
            <div>&nbsp;</div>
            <div>&nbsp;</div>
            <div class="da one-box c-red font-size-one">&gt;&gt; 后端开发：堆 和 栈 的区别</div>
            <div class="da r-font-two">1、栈（操作系统）：由操作系统自动分配释放，存放函数的参数值，局部变量的值等。</div>
            <div class="da r-font-two">2、堆（操作系统）：存储复杂类型（对象），一般由程序员分配释放，若程序员不释放，由回收机制回收。</div>
            <div class="da r-font-two o-big">※ 注意：在 JavaScript 中不存在堆和栈的概念。</div>
            <!-- ! 后端开发：堆和栈 结束 -->
        </div>

        <!-- 第 10 组 -->
        <div class="demo-box">
            <!-- 提问部分 -->
            <div class="wen">
                <!-- 序号 -->
                <div class="num">Null</div>
                <!-- 问题 -->
                <div class="text-box">Math 方法</div>
            </div>
            <!-- 回答部分 -->
            <!-- * 表格部分 开始 -->
            <div class="tb-ten">
                <div class="zdxz-btn" id="zdxz-btn">
                    <span id="wz-text">点击选中</span>
                    <span id="xz-btn" class="wxz"></span>
                </div>
                <table>
                    <caption>Math 函数演示</caption>
                    <thead>
                        <tr>
                            <th>函数名</th>
                            <th>详细介绍</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td class="omath">Math.PI()</td>
                            <td>圆周率</td>
                        </tr>
                        <tr>
                            <td class="omath sd-box">Math.random()</td>
                            <td>生成随机数</td>
                        </tr>
                        <tr>
                            <td class="omath">Math.floor()</td>
                            <td>向下取整</td>
                        </tr>
                        <tr>
                            <td class="omath">Math.ceil()</td>
                            <td>向上取整</td>
                        </tr>
                        <tr>
                            <td class="omath">Math.round()</td>
                            <td>取整，四舍五入</td>
                        </tr>
                        <tr>
                            <td class="omath">Math.abs()</td>
                            <td>绝对值</td>
                        </tr>
                        <tr>
                            <td class="omath">Math.max()</td>
                            <td>求最大值</td>
                        </tr>
                        <tr>
                            <td class="omath">Math.min()</td>
                            <td>求最小值</td>
                        </tr>
                        <tr>
                            <td class="omath">Math.sin()</td>
                            <td>正弦</td>
                        </tr>
                        <tr>
                            <td class="omath">Math.cos()</td>
                            <td>余弦</td>
                        </tr>
                        <tr>
                            <td class="omath">Math.power()</td>
                            <td>求指数次幂</td>
                        </tr>
                        <tr>
                            <td class="omath">Math.sqrt()</td>
                            <td>求平方根</td>
                        </tr>
                    </tbody>
                </table>
            </div>

            <!-- * 表格样式 开始 -->
            <style type="text/css">
                div.tb-ten {
                    position: relative;
                    padding: 20px 0 50px 0;
                    width: 100%;
                    font-size: 20px;
                }

                div.tb-ten .zdxz-btn {
                    position: relative;
                    position: absolute;
                    right: 200px;
                    top: 70px;
                    font-size: 14px;
                }

                /* 未选择 */
                div.tb-ten .zdxz-btn span.wxz {
                    display: none;
                }

                /* 选择 */
                div.tb-ten .zdxz-btn span.xz {
                    position: absolute;
                    right: -20px;
                    top: 2.5px;
                    display: block;
                    width: 15px;
                    height: 15px;
                    border: 1px solid #000;
                    box-sizing: border-box;
                    cursor: pointer;
                }

                /* 表格 */
                div.tb-ten table {
                    margin: 0 auto;
                    width: 960px;
                    border-collapse: collapse;
                }

                div.tb-ten table caption {
                    font-size: 40px;
                    padding: 10px 0;
                }

                td,
                th {
                    height: 35px;
                    border: 1px solid #000;
                }

                div.tb-ten table tbody tr th:first-child,
                div.tb-ten table tbody tr td:first-child {
                    width: 288px;
                    padding-left: 60px;
                    box-sizing: border-box;
                    background-color: aliceblue;
                }

                div.tb-ten table tbody tr th:last-child,
                div.tb-ten table tbody tr td:last-child {
                    width: 672px;
                    padding-left: 40px;
                    box-sizing: border-box;
                    background-color: skyblue;
                }
            </style>
            <!-- ! 表格样式 结束-->
            <script type="text/javascript">
                // 设置按钮样式
                var oBtnXZ = document.getElementById("xz-btn"),
                    oBtnZDXZ = document.getElementById("zdxz-btn"),
                    oTextWZ = document.getElementById("wz-text");
                var TFThis = 0;
                oBtnZDXZ.onclick = function () {
                    oBtnXZ.classList.remove("wxz");
                    oBtnXZ.classList.add("xz");
                    oTextWZ.innerHTML = "自动选中";
                    if (TFThis == 0) {
                        oTableChoose(0);
                        TFThis = 1;
                    }
                }

                var oBoxTF1 = 1;
                oBtnXZ.onclick = function () {
                    if (oBoxTF1 == 1) {
                        oBtnXZ.style.backgroundColor = "red";
                        oBoxTF1 = false;
                        oTableChoose(1);
                    } else {
                        oBtnXZ.style.backgroundColor = "";
                        oBoxTF1 = true;
                        oTableChoose(0);
                    }
                }


                function oTableChoose(oState) {
                    // 设置是否自动选中
                    // 获取所有表格中的指定类名
                    var oTagClass = document.getElementsByClassName("omath");

                    // 循环类名 并更改样式
                    for (var oNum = 0; oNum <= oTagClass.length - 1; oNum++) {
                        if (oState == 1) {
                            oTagClass[oNum].style.cursor = "default";
                            oTagClass[oNum].style.userSelect = "all";
                        } else {
                            oTagClass[oNum].style.cursor = "text";
                            oTagClass[oNum].style.userSelect = "text";
                        }
                    }
                };

            </script>
            <!-- * 选中脚本 开始 -->
            <!-- ! 选中脚本 结束 -->
            <!-- ! 表格部分 结束 -->

            <!-- * Math.PI 圆周率 开始 -->
            <div class="da one-box c-red font-size-one">&gt;&gt;
                <a class="hover-blue"
                    href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Math/PI"
                    target="_blank" rel="noopener noreferrer"> Math.PI()</a>
            </div>
            <div class="da r-font-two">表示一个园的周长与直径的比例，约为：3.14159</div>
            <!-- ! Math.PI 圆周率 结束 -->

            <!-- * Math.random 生成随机数 开始 -->
            <div>&nbsp;</div>
            <div class="da one-box c-red font-size-one">&gt;&gt;
                <a class="hover-blue"
                    href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Math/random"
                    target="_blank" rel="noopener noreferrer">Math.random()</a>
            </div>
            <div class="da r-font-two">函数返回一个浮点数，伪随机数在范围 0 到 1 之间（且小于 1 ），也就是说从 0 开始且包括 0 往上，到 1 结束但不包含 1
                ，然后您可以缩放到所需要的范围。实现将初始种子选择到随机数生成算法；它不能被用户选择或重置。</div>
            <!-- ! Math.random 生成随机数 结束 -->

            <!-- * Math.floor 向下取整 开始 -->
            <div>&nbsp;</div>
            <div class="da one-box c-red font-size-one">&gt;&gt;
                <a class="hover-blue"
                    href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Math/floor"
                    target="_blank" rel="noopener noreferrer"> Math.floor()</a>
            </div>
            <div class="da r-font-two">返回小于或等于一个给定数字的最大整数。</div>
            <!-- ! Math.floor 向下取整 结束 -->

            <!-- * Math.ceil 向上取整 开始 -->
            <div>&nbsp;</div>
            <div class="da one-box c-red font-size-one">&gt;&gt;
                <a class="hover-blue"
                    href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Math/ceil"
                    target="_blank" rel="noopener noreferrer"> Math.ceil()</a>
            </div>
            <div class="da r-font-two">返回大于或等于一个给定数字的最大整数。</div>
            <!-- ! Math.ceil 向上取整 结束 -->

            <!-- * Math.round 四舍五入 开始 -->
            <div>&nbsp;</div>
            <div class="da one-box c-red font-size-one">&gt;&gt;
                <a class="hover-blue"
                    href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Math/round"
                    target="_blank" rel="noopener noreferrer"> Math.round()</a>
            </div>
            <div class="da r-font-two">返回一个数字四舍五入后最接近的整数。</div>
            <!-- ! Math.round 四舍五入 结束 -->

            <!-- * Math.abs 绝对值 开始 -->
            <div>&nbsp;</div>
            <div class="da one-box c-red font-size-one">&gt;&gt;
                <a class="hover-blue"
                    href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Math/abs"
                    target="_blank" rel="noopener noreferrer">
                    Math.abs()</a>
            </div>
            <div class="da r-font-two">传入一个非数字形式的字符串或者 undefined、empty 变量，将返回 NaN。传入 NaN 将返回 0。</div>
            <!-- ! Math.abs 绝对值 结束 -->

            <!-- * Math.max 最大值 开始 -->
            <div>&nbsp;</div>
            <div class="da one-box c-red font-size-one">&gt;&gt;
                <a class="hover-blue"
                    href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Math/max"
                    target="_blank" rel="noopener noreferrer">
                    Math.max()</a>
            </div>
            <div class="da r-font-two">返回一组数中的最大值。</div>
            <!-- ! Math.max 最大值 结束 -->

            <!-- * Math.min 最小值 开始 -->
            <div>&nbsp;</div>
            <div class="da one-box c-red font-size-one">&gt;&gt;
                <a class="hover-blue"
                    href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Math/min"
                    target="_blank" rel="noopener noreferrer">
                    Math.min()</a>
            </div>
            <div class="da r-font-two">返回一组数中的最小值。</div>
            <!-- ! Math.min 最小值 结束 -->

            <!-- * Math.pow 求指数次幂 开始 -->
            <div>&nbsp;</div>
            <div class="da one-box c-red font-size-one">&gt;&gt;
                <a class="hover-blue"
                    href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Math/pow"
                    target="_blank" rel="noopener noreferrer">
                    Math.pow()</a>
            </div>
            <div class="da r-font-two">在使用时不要使用原名称：power，而是使用方法名：pow。返回基数（base）的指数（exponent）次幂，即base<sup>exponent</sup>。
            </div>
            <!-- ! Math.pow 求指数次幂 结束 -->

            <!-- * Math.sqrt 平方根 开始 -->
            <div>&nbsp;</div>
            <div class="da one-box c-red font-size-one">&gt;&gt;
                <a class="hover-blue"
                    href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Math/sqrt"
                    target="_blank" rel="noopener noreferrer">
                    Math.sqrt()</a>
            </div>
            <div class="da r-font-two">返回一个数的平方根。
            </div>
            <!-- ! Math.sqrt 平方根 结束 -->
        </div>

        <!-- 第 11 组 -->
        <div class="demo-box">
            <!-- 提问部分 -->
            <div class="wen">
                <!-- 序号 -->
                <div class="num">Null</div>
                <!-- 问题 -->
                <div class="text-box">Array 数组对象</div>
            </div>
            <!-- 回答部分 -->
            <div class="da one-box c-red font-size-one">&gt;&gt; new Array() 构造函数方法</div>

            <!-- * 代码部分 开始 -->
            <div>&nbsp;</div>
            <div class="da r-font-two m-tb-5px code-text p-b-one">
                <div class="da m-tb-5px nocode-big">// new Array() 方法</div>
                <div class="da r-font-two m-tb-5px">var oSet1 = new Array();</div>
                <div>&nbsp;</div>
            </div>
            <!-- ! 代码部分 结束 -->

            <div>&nbsp;</div>
            <div class="da r-font-two c-green">※ 知识点：instanceof：检测某个实例是否是某个对象类型。</div>
            <div>&nbsp;</div>
            <!-- * 代码部分 开始 -->
            <div class="da r-font-two m-tb-5px code-text p-b-one">
                <div class="da m-tb-5px nocode-big">// Name instanceof type 方法</div>
                <div class="da r-font-two m-tb-5px">console.log(oSet1 instanceos Array);</div>
                <div>&nbsp;</div>
            </div>
            <!-- ! 代码部分 结束 -->
            <div>&nbsp;</div>

            <!-- * push() 方法 开始 -->
            <div>&nbsp;</div>
            <div class="da one-box c-red font-size-one">&gt;&gt; push()</div>
            <div class="da r-font-two one-box">作用：在数组末尾的位置添加一个或多个元素，并返回数组的新长度。</div>
            <!-- * 代码部分 开始 -->
            <div>&nbsp;</div>
            <div class="da r-font-two m-tb-5px code-text p-b-one">
                <div class="da m-tb-5px nocode-big">// push() 方法</div>
                <div class="da r-font-two m-tb-5px">var oSet = [0, 1, 2, 3];</div>
                <div class="da r-font-two m-tb-5px">oSet.push(4); <span class="nocode-big">// Array(5) [0, 1, 2, 3,
                        4]</span></div>
                <div>&nbsp;</div>
            </div>
            <!-- ! 代码部分 结束 -->
            <!-- ! push() 方法 结束 -->

            <!-- * pop() 方法 开始 -->
            <div>&nbsp;</div>
            <div class="da one-box c-red font-size-one">&gt;&gt; pop()</div>
            <div class="da r-font-two one-box">作用：删除数组最后一项，返回删除项。</div>
            <!-- * 代码部分 开始 -->
            <div>&nbsp;</div>
            <div class="da r-font-two m-tb-5px code-text p-b-one">
                <div class="da m-tb-5px nocode-big">// pop() 方法</div>
                <div class="da r-font-two m-tb-5px">var oSet = [0, 1, 2, 3];</div>
                <div class="da r-font-two m-tb-5px">oSet.pop();
                    <span class="nocode-big"> // Array(3) [0, 1, 2]</span>
                </div>
                <div>&nbsp;</div>
            </div>
            <!-- ! 代码部分 结束 -->
            <!-- ! pop() 方法 结束 -->

            <!-- * shift() 方法 开始 -->
            <div>&nbsp;</div>
            <div class="da one-box c-red font-size-one">&gt;&gt; shift()</div>
            <div class="da r-font-two one-box">作用：删除数组第一项，返回删除项。</div>
            <!-- * 代码部分 开始 -->
            <div>&nbsp;</div>
            <div class="da r-font-two m-tb-5px code-text p-b-one">
                <div class="da m-tb-5px nocode-big">// shift() 方法</div>
                <div class="da r-font-two m-tb-5px">var oSet = [0, 1, 2, 3];</div>
                <div class="da r-font-two m-tb-5px">oSet.shift(); <span class="nocode-big">// Array(3) [1, 2, 3]</span>
                </div>
                <div>&nbsp;</div>
            </div>
            <!-- ! 代码部分 结束 -->
            <!-- ! shift() 方法 结束 -->

            <!-- * unshift() 方法 开始 -->
            <div>&nbsp;</div>
            <div class="da one-box c-red font-size-one">&gt;&gt; unshift()</div>
            <div class="da r-font-two one-box">作用：在数组开头的位置添加一个或多个元素，并返回数组的新长度。</div>
            <!-- * 代码部分 开始 -->
            <div>&nbsp;</div>
            <div class="da r-font-two m-tb-5px code-text p-b-one">
                <div class="da m-tb-5px nocode-big">// unshift() 方法</div>
                <div class="da r-font-two m-tb-5px">var oSet = [0, 1, 2, 3];</div>
                <div class="da r-font-two m-tb-5px">oSet.unshift(4); <span class="nocode-big">// Array(5) [4, 0, 1, 2,
                        3,]</span></div>
                <div>&nbsp;</div>
            </div>
            <!-- ! 代码部分 结束 -->
            <!-- ! unshift() 方法 结束 -->

            <!-- * concat() 方法 开始 -->
            <div>&nbsp;</div>
            <div class="da one-box c-red font-size-one">&gt;&gt; concat()</div>
            <div class="da r-font-two one-box">作用：将两个数组合并成一个新的数组，原数组不受影响。参数位置可以是一个数组字面量、数组变量、零散的值。</div>
            <!-- * 代码部分 开始 -->
            <div>&nbsp;</div>
            <div class="da r-font-two m-tb-5px code-text p-b-one">
                <div class="da m-tb-5px nocode-big">// push() 方法</div>
                <div class="da r-font-two m-tb-5px">var oSet = [0, 1, 2, 3];</div>
                <div class="da r-font-two m-tb-5px">var oSet1 = [4, 5, 6, 7];</div>
                <div class="da r-font-two m-tb-5px">var oSet2 = oSet.concat(oSet1);</div>
                <div class="da r-font-two m-tb-5px">console.log(oSet2);
                    <span class="nocode-big"> // Array(7) [0, 1, 2, 3, 4, 5, 6, 7]</span>
                </div>
                <div>&nbsp;</div>
            </div>
            <!-- ! 代码部分 结束 -->
            <!-- ! concat() 方法 结束 -->

            <!-- * slice(start, end) 方法 开始 -->
            <div>&nbsp;</div>
            <div class="da one-box c-red font-size-one">&gt;&gt; slice(start, end) => slice(Number)</div>
            <div class="da r-font-two one-box">作用：(双值：)从当前数组中截取一个新的数组 ，不影响原数组，返回一个新的数组，其内容包含从 star 开始至 end 结束（不包含
                end）的元素。（单值：）数字参数严格区分正负，正值表示下标位置，负值表示从后向前数第几位,参数一个时表示从开始位置截取到该数组结束。
            </div>

            <!-- * 代码部分 开始 -->
            <div>&nbsp;</div>
            <div class="da r-font-two m-tb-5px code-text p-b-one">
                <div class="da m-tb-5px nocode-big r-font-two">// slice(Number) 方法</div>
                <div class="da r-font-two m-tb-5px">var oSet = [0, 1, 2, 3];</div>
                <div class="da r-font-two m-tb-5px">var oSet1 = oSet.slice(3);
                    <span class="nocode-big"> // Array(1) [3]</span>
                </div>
                <div>&nbsp;</div>
                <div class="da r-font-two m-tb-5px">var oSet = [0, 1, 2, 3];</div>
                <div class="da r-font-two m-tb-5px">var oSet1 = oSet.slice(-3);
                    <span class="nocode-big"> // Array(3) [1, 2, 3]</span>
                </div>
                <div>&nbsp;</div>
                <div class="da m-tb-5px nocode-big r-font-two">// slice(start, end) 方法</div>
                <div class="da r-font-two m-tb-5px">var oSet = [0, 1, 2, 3];</div>
                <div class="da r-font-two m-tb-5px">var oSet1 = oSet.slice(1, 3);
                    <span class="nocode-big"> // Array(2) [1, 2]</span>
                </div>
                <div>&nbsp;</div>
                <div class="da r-font-two m-tb-5px">var oSet = [0, 1, 2, 3];</div>
                <div class="da r-font-two m-tb-5px">var oSet1 = oSet.slice(-3, -1);
                    <span class="nocode-big"> // Array(2) [1, 2]</span>
                </div>
                <div>&nbsp;</div>
            </div>
            <!-- ! 代码部分 结束 -->
            <div>&nbsp;</div>
            <div class="da r-font-two one-box c-orange">※ 注意：若是双值且为负数 Start 大于 End。（书写数值超出数组范围或书写数值 End 大于 Start
                时返回结果为空）</div>
            <!-- ! slice(start, end) 方法 结束 -->

            <!-- * splice 删除、插入、替换 开始 -->
            <div>&nbsp;</div>
            <div class="da one-box c-red font-size-one">&gt;&gt; splice(index, howmany, element1, element2,...,elementN)
            </div>
            <div class="da r-font-two one-box">1、index：从第几个开始（删除）。</div>
            <div class="da r-font-two one-box">2、howmany：删除元素的个数，可以为：0。</div>
            <div class="da r-font-two one-box">3、elementX：要替换的新数据。</div>

            <!-- * 代码部分 开始 -->
            <div>&nbsp;</div>
            <div class="da r-font-two m-tb-5px code-text p-b-one">
                <div class="da m-tb-5px nocode-big">// splice(index, howmany, element1, element2,...,elementN) 方法</div>
                <div class="da m-tb-5px nocode-big">// 创建数组</div>
                <div class="da r-font-two m-tb-5px">var oSet = [0, 1, 2, 3, 4, 5, 6, 7, 8 ,9 ,10];</div>
                <div>&nbsp;</div>

                <!-- * 删除功能 -->
                <div class="da m-tb-5px nocode-big">// 1、splice() 删除功能</div>
                <div class="da r-font-two m-tb-5px">console.log(oSet.splice(2, 5)); <span class="nocode-big">//
                        Array(5)[2, 3, 4, 5, 6](返回值)</span>
                </div>
                <div class="da r-font-two m-tb-5px">console.log(oSet); <span class="nocode-big">// Array(6)[0, 1, 7, 8,
                        9， 10](执行后的数组)</span></div>
                <div>&nbsp;</div>

                <!-- * 替换功能 -->
                <div class="da m-tb-5px nocode-big">// 2、splice() 替换功能</div>
                <div class="da r-font-two m-tb-5px">oSet.splice(2, 5, "字符串1", "字符串2");</div>
                <div class="da r-font-two m-tb-5px">console.log(oSet); <span class="nocode-big">// Array(8)[0, 1,
                        "字符串1", "字符串2", 7, 8, 9，
                        10](执行后的数组)</span></div>

                <!-- * 插入功能 -->
                <div>&nbsp;</div>
                <div class="da m-tb-5px nocode-big">// 3、splice() 插入功能</div>
                <div class="da r-font-two m-tb-5px">oSet.splice(2, 0, "字符串1");</div>
                <div class="da r-font-two m-tb-5px">console.log(oSet); <span class=" nocode-big">// Array(12)[0, 1,
                        "字符串1", 2, 3, 4, 5, 6, 7, 8 ,9
                        ,10](执行后的数组)</span>
                </div>
                <div>&nbsp</div>
            </div>
            <!-- ! 代码部分 结束 -->
            <!-- ! splice 删除、插入、替换 结束 -->

            <!-- * indexOf() 开始 -->
            <div>&nbsp;</div>
            <div class="da one-box c-red font-size-one">&gt;&gt; indexOf()</div>
            <div class="da r-font-two one-box">查找数据在数组中最先出现的下标位置。</div>
            <!-- * 代码部分 开始 -->
            <div>&nbsp;</div>
            <div class="da r-font-two m-tb-5px code-text p-b-one">
                <div class="da m-tb-5px nocode-big r-font-two">// indexOf() 方法</div>
                <div class="da m-tb-5px nocode-big r-font-two">// 创建数组</div>
                <div class="da r-font-two m-tb-5px">var oSet = [0, 1, 2, 3, 4, 5, 6, 7, 8 ,9 ,10, 4];</div>
                <div>&nbsp;</div>
                <div class="da m-tb-5px nocode-big r-font-two">// 从头部开始查询 from =&gt; to</div>
                <div class="da r-font-two m-tb-5px">console.log(oSet.indexOf(4)); <span class="nocode-big">//
                        输出结果：4</span></div>
                <div>&nbsp;</div>
            </div>
            <div>&nbsp;</div>
            <div class="da r-font-two r-big">※ 注意：如果没有查询到则返回：-1。</div>
            <!--! 代码部分 结束 -->
            <!-- ! indexOf() 结束 -->

            <!-- * lastIndexOf() 开始 -->
            <div>&nbsp;</div>
            <div class="da one-box c-red font-size-one">&gt;&gt; lastIndexOf()</div>
            <div class="da r-font-two one-box">查找数据在数组中最后一次出现的下标位置。</div>
            <!-- * 代码部分 开始 -->
            <div>&nbsp;</div>
            <div class="da r-font-two m-tb-5px code-text p-b-one">
                <div class="da m-tb-5px nocode-big r-font-two">// lastIndexOf() 方法</div>
                <div class="da m-tb-5px nocode-big r-font-two">// 创建数组</div>
                <div class="da r-font-two m-tb-5px">var oSet = [0, 1, 2, 3, 4, 5, 6, 7, 8 ,9 ,10, 4];</div>
                <div>&nbsp;</div>
                <div class="da m-tb-5px nocode-big r-font-two">// 从末尾开始查询 to &lt;= from</div>
                <div class="da r-font-two m-tb-5px">console.log(oSet.lastIndexOf(4)); <span class="nocode-big">//
                        输出结果：11</span></div>
                <div>&nbsp;</div>
            </div>
            <!-- ! 代码部分 结束 -->
            <div>&nbsp;</div>
            <div class="da r-font-two r-big">※ 注意：从头开始数，查询到最后一个需要查询的值的位置。并非从后向前数！！！</div>
            <div class="da r-font-two r-big">※ 注意：如果没有查询到则返回：-1。</div>
            <!-- ! lastIndexOf() 结束 -->

            <!-- * reverse() 开始 -->
            <div>&nbsp;</div>
            <div class="da one-box c-red font-size-one">&gt;&gt; reverse()</div>
            <div class="da r-font-two one-box">将数组完全颠倒，第一项变成最后一项，最后一项变成第一项。<span class="r-big">※
                    注意：该方法会改变原数组，并不会创建新的数组！</span></div>
            <!-- * 代码部分 开始 -->
            <div>&nbsp;</div>
            <div class="da r-font-two m-tb-5px code-text p-b-one">
                <div class="da m-tb-5px nocode-big r-font-two">// reverse() 方法</div>
                <div class="da m-tb-5px nocode-big r-font-two">// 创建数组</div>
                <div class="da r-font-two m-tb-5px">var oSet = [1, 2, 3, 4, 5, 6];</div>
                <div>&nbsp;</div>
                <div class="da m-tb-5px nocode-big r-font-two">// 将数组倒置</div>
                <div class="da r-font-two m-tb-5px">oSet.reverse();</div>
                <div>&nbsp;</div>
                <div class="da m-tb-5px nocode-big r-font-two">// 输出至后台</div>
                <div class="da r-font-two m-tb-5px">console.log(oSet); <span class="nocode-big">// Array(6)[6, 5, 4, 3,
                        2, 1]</span></div>
                <div>&nbsp;</div>
            </div>
            <!-- ! 代码部分 结束 -->
            <!-- ! reverse() 结束 -->
        </div>
        <!-- ! 第 11 组 结束 -->

        <!-- * 第 12 组 -->
        <div class="demo-box">
            <!-- 提问部分 -->
            <div class="wen">
                <!-- 序号 -->
                <div class="num">Null</div>
                <!-- 问题 -->
                <div class="text-box">数组的常用方法</div>
            </div>
            <!-- 回答部分 -->
            <div class="da one-box c-red font-size-one">&gt;&gt; 转字符串方法</div>
            <div class="da r-font-two two-tbox">转字符串的方法：将数组的所元素连接到一个字符串中。</div>
            <div class="da r-font-four">join() 方法：通过参数作为连字符将数组中的每一项用连字符连成一个完整的字符串。</div>
            <!-- * 代码部分 开始 -->
            <div>&nbsp;</div>
            <div class="da r-font-two m-tb-5px code-text p-b-one">
                <div class="da m-tb-5px nocode-big r-font-two">// reverse() 方法</div>
                <div class="da m-tb-5px nocode-big r-font-two">// 创建数组</div>
                <div class="da r-font-two m-tb-5px">var oSet = [0, 1, 2, 3, 4, 5, 6];</div>
                <div>&nbsp;</div>
                <div class="da m-tb-5px nocode-big r-font-two">// 数组 => 字符串(转换)</div>
                <div class="da r-font-two m-tb-5px">var oStr = oSet.join("");</div>
                <div>&nbsp;</div>
                <div class="da m-tb-5px nocode-big r-font-two">// 输出至后台</div>
                <div class="da r-font-two m-tb-5px">console.log(oStr); <span class="nocode-big">// 输出结果：123456</span>
                </div>
                <div class="da m-tb-5px">&nbsp;</div>
            </div>
            <!-- ! 代码部分 结束 -->

            <!-- * 清空数组的方法 -->
            <div class="da one-box c-red font-size-one">&gt;&gt; 清空数组的方法</div>
            <!-- * 代码部分 开始 -->
            <div>&nbsp;</div>
            <div class="da r-font-two m-tb-5px code-text p-b-one">
                <div class="da m-tb-5px nocode-big r-font-two">// 创建数组</div>
                <div class="da r-font-two m-tb-5px">var oSet = [0, 1, 2, 3, 4, 5, 6];</div>
                <div>&nbsp;</div>
                <div class="da m-tb-5px nocode-big r-font-two">// 方法 01</div>
                <div class="da r-font-two m-tb-5px">oSet = [];</div>
                <div>&nbsp;</div>
                <div class="da m-tb-5px nocode-big r-font-two">// 方法 02</div>
                <div class="da r-font-two m-tb-5px">oSet.length = 0;</div>
                <div>&nbsp;</div>
                <div class="da m-tb-5px nocode-big r-font-two">// 方法 03</div>
                <div class="da r-font-two m-tb-5px">oSet.splice(0, oSet.length);</div>
                <div>&nbsp;</div>
            </div>
            <!-- ! 代码部分 结束 -->
        </div>
        <!-- ! 第 12 组 结束 -->

        <!-- * 第 13 组 -->
        <div class="demo-box">
            <!-- 提问部分 -->
            <div class="wen">
                <!-- 序号 -->
                <div class="num">Null</div>
                <!-- 问题 -->
                <div class="text-box">String 字符串类型方法</div>
            </div>
            <!-- 回答部分 -->
            <div class="da one-box c-red font-size-one">&gt;&gt; 基本包装类型</div>
            <div class="da r-font-two two-tbox">字符串所有的方法，都不会修改字符串本身（字符串是不可能变的），操作完成会返回一个新的字符串。</div>
            <div class="da r-font-two b-big">※ 特点：字符串是不可变的。(它只是被后续替换掉了而已！)</div>
            <div class="da r-font-two r-big">※ 缺点：拼接字符串次数如果过多会占用大量的资源和存储。不建议使用！</div>
            <!-- * 代码部分 开始 -->
            <div>&nbsp;</div>
            <div class="da r-font-two m-tb-5px code-text p-b-one">
                <div class="da m-tb-5px nocode-big r-font-two">// 创建数组</div>
                <div class="da r-font-two m-tb-5px">var oSet = ["qianduan","kaifa"];</div>
                <div>&nbsp;</div>
                <div class="da m-tb-5px nocode-big r-font-two">// 转成对象</div>
                <div class="da r-font-two m-tb-5px">oStr = new String(oSet);</div>
                <div>&nbsp;</div>
            </div>
            <!-- ! 代码部分 结束 -->

            <!-- * charAt() 方法 开始 -->
            <div>&nbsp;</div>
            <div class="da one-box c-red font-size-one">&gt;&gt; charAt()</div>
            <div class="da r-font-two two-tbox">charAt() 方法可返回指定位置的字符串。</div>
            <div class="da r-font-two">charAt() 方法的参数是 index 字符串的下标（<span class="r-big-solid">也是从 0 开始数的！</span>）。</div>
            <!-- * 代码部分 开始 -->
            <div>&nbsp;</div>
            <div class="da r-font-two m-tb-5px code-text p-b-one">
                <div class="da m-tb-5px nocode-big r-font-two">// 定义一个字符串</div>
                <div class="da r-font-two m-tb-5px">var oSet = "qianduankaifa";</div>
                <div>&nbsp;</div>
                <div class="da m-tb-5px nocode-big r-font-two">// 返回指定下标位置的字符</div>
                <div class="da r-font-two m-tb-5px">console.log(oSet.charAt(6)); <span class="nocode-big"> //
                        输出：a</span></div>
                <div>&nbsp;</div>
            </div>
            <!-- ! 代码部分 结束 -->
            <!-- ! charAt() 结束 -->

            <!-- * indexOf() 方法 开始 -->
            <div>&nbsp;</div>
            <div class="da one-box c-red font-size-one">&gt;&gt; indexOf()</div>
            <div class="da r-font-two two-tbox">indexOf() 方法可返回某个指定的字符串在字符串中首次出现的位置。</div>
            <div class="da r-font-two">indexOf() 方法找到指定的子字符串在原字符串中第一次出现的位置的下标。（<span
                    class="r-big-solid">如果子字符串在原字符串中没有，则返回 -1！</span>）。</div>
            <!-- * 代码部分 开始 -->
            <div>&nbsp;</div>
            <div class="da r-font-two m-tb-5px code-text p-b-one">
                <div class="da m-tb-5px nocode-big r-font-two">// 定义一个字符串</div>
                <div class="da r-font-two m-tb-5px">var oSet = "qianduankaifa";</div>
                <div>&nbsp;</div>
                <div class="da m-tb-5px nocode-big r-font-two">// 返回子字符串在原始字符串中第一次出现位置的下标</div>
                <div class="da r-font-two m-tb-5px">console.log(oSet.indexOf("a")); <span class="nocode-big"> //
                        输出：2</span></div>
                <div class="da m-tb-5px nocode-big r-font-two">// 即便是一串字符串，也是寻找这个字符串的第一个字符在原字符串中出现的位置。</div>
                <div class="da r-font-two m-tb-5px">console.log(oSet.indexOf("an")); <span class="nocode-big"> //
                        输出：2</span></div>
                <div>&nbsp;</div>
                <div class="da m-tb-5px nocode-big r-font-two">// 但如果在该字符串中不小心或其他原因输入了一个空格，则无法在原字符串中寻找到该字符串，则会返回 -1。
                </div>
                <div class="da r-font-two m-tb-5px">console.log(oSet.indexOf("a n")); <span class="nocode-big"> //
                        输出：-1</span></div>
                <div>&nbsp;</div>
            </div>
            <!-- ! 代码部分 结束 -->
            <!-- ! indexOf() 结束 -->

            <!-- * concat() 方法 开始 -->
            <div>&nbsp;</div>
            <div class="da one-box c-red font-size-one">&gt;&gt; concat()</div>
            <div class="da r-font-two two-tbox">concat() 方法用于拼接两个或多个字符串。</div>
            <div class="da r-font-two">concat() 方法生成的是一个新的字符串。（<span class="r-big-solid">也是说原字符串不受影响！</span>）。</div>
            <!-- * 代码部分 开始 -->
            <div>&nbsp;</div>
            <div class="da r-font-two m-tb-5px code-text p-b-one">
                <div class="da m-tb-5px nocode-big r-font-two">// 定义一个字符串</div>
                <div class="da r-font-two m-tb-5px">var oSet = "qianduan";</div>
                <div>&nbsp;</div>
                <div class="da m-tb-5px nocode-big r-font-two">// 拼接字符串</div>
                <div class="da r-font-two m-tb-5px">var oSet1 = oSet.concat("kaifa")</div>
                <div>&nbsp;</div>
                <div class="da m-tb-5px nocode-big r-font-two">// 后台输出</div>
                <div class="da r-font-two m-tb-5px">console.log(oSet)<span class="nocode-big"> //
                        输出：qianduan</span></div>
                <div class="da r-font-two m-tb-5px">console.log(oSet1)<span class="nocode-big"> //
                        输出：qianduankaifa</span></div>
                <div>&nbsp;</div>
            </div>
            <!-- ! 代码部分 结束 -->
            <!-- ! concat() 结束 -->

            <!-- * split() 方法 开始 -->
            <div>&nbsp;</div>
            <div class="da one-box c-red font-size-one">&gt;&gt; split()</div>
            <div class="da r-font-two two-tbox">split() 方法用于把一个字符串分割成字符串数组。</div>
            <div class="da r-font-two">split() 方法的参数部分就是分隔符，利用分隔符将字符串分割成多个部分，多个部分作为数组的每一项组成数。（<span
                    class="r-big-solid">如果分隔符是空字符串，相当于将每个字符拆分成数组中的每一项！</span>）</div>
            <!-- * 代码部分 开始 -->
            <div>&nbsp;</div>
            <div class="da r-font-two m-tb-5px code-text p-b-one">
                <div class="da m-tb-5px nocode-big r-font-two">// 定义一个字符串</div>
                <div class="da r-font-two m-tb-5px">var oSet = "qianduan";</div>
                <div>&nbsp;</div>
                <div class="da m-tb-5px nocode-big r-font-two r-font-two">// 分割字符串</div>
                <div class="da r-font-two m-tb-5px">var oArr = oSet.split("");</div>
                <div>&nbsp;</div>
                <div class="da m-tb-5px nocode-big r-font-two">// 后台输出</div>
                <div class="da r-font-two m-tb-5px">console.log(oArr); <span class="nocode-big"> //
                        输出：Array(8)["q", "i", "a", "n", "d", "u", "a", "n"]</span></div>

                <div>&nbsp;</div>
                <div class="da m-tb-5px nocode-big r-font-two">// 定义一个字符串</div>
                <div class="da r-font-two m-tb-5px">var oSet1 = "qian,duan";</div>
                <div>&nbsp;</div>
                <div class="da m-tb-5px nocode-big r-font-two">// 分割字符串</div>
                <div class="da r-font-two m-tb-5px">var oArr = oSet1.split(",");</div>
                <div>&nbsp;</div>
                <div class="da m-tb-5px nocode-big r-font-two">// 后台输出</div>
                <div class="da r-font-two m-tb-5px">console.log(oArr); <span class="nocode-big"> //
                        输出：Array(2)["qian", "duan"]</span></div>
                <div>&nbsp;</div>
            </div>
            <!-- ! 代码部分 结束 -->
            <!-- ! split() 结束 -->

            <!-- * 综合案例 开始 -->
            <div>&nbsp;</div>
            <div class="da one-box c-red font-size-one">&gt;&gt; 综合案例</div>
            <div class="da r-font-two two-tbox">将字符串倒置,<span class="r-big">例如：123 =&gt; 321</span></div>
            <!-- * 代码部分 开始 -->
            <div>&nbsp;</div>
            <div class="da r-font-two m-tb-5px code-text p-b-one">
                <div class="da m-tb-5px nocode-big r-font-two">// 定义一个字符串</div>
                <div class="da r-font-two m-tb-5px">var oSet = "qianduankaifa";</div>
                <div>&nbsp;</div>
                <div class="da m-tb-5px nocode-big r-font-two">// 字符串转数组</div>
                <div class="da r-font-two m-tb-5px">var oArr = oSet.split("");</div>
                <div>&nbsp;</div>
                <div class="da m-tb-5px r-font-two nocode-big">// 倒置数组</div>
                <div class="da r-font-two m-tb-5px">oArr.reverse();</div>
                <div>&nbsp;</div>
                <div class="da m-tb-5px nocode-big r-font-two">// 拼接数组</div>
                <div class="da r-font-two m-tb-5px">oSet = oArr.join("");</div>
                <div>&nbsp;</div>
                <div class="da m-tb-5px nocode-big r-font-two">// 后台输出</div>
                <div class="da r-font-two m-tb-5px">console.log(oSet); <span class="nocode-big"> //
                        输出：Array(8)["q", "i", "a", "n", "d", "u", "a", "n"]</span></div>
                <div>&nbsp;</div>
                <!-- * 简易方法 -->
                <div class="da r-font-two m-tb-5px gy-big">// * 简易方法 *</div>
                <div class="da m-tb-5px nocode-big r-font-two">// 定义一个字符串</div>
                <div class="da r-font-two m-tb-5px">var oSet = "qianduankaifa";</div>
                <div>&nbsp;</div>
                <div class="da m-tb-5px nocode-big r-font-two">// 调用自己 => 字符串转数组 => 再将数组倒置 => 最后进行拼接</div>
                <div class="da r-font-two m-tb-5px">oSet = oSet.split("").reverse().join("");</div>
                <div>&nbsp;</div>
                <div class="da m-tb-5px nocode-big r-font-two">// 后台输出</div>
                <div class="da r-font-two m-tb-5px">console.log(oSet); <span class="nocode-big"> //
                        输出：Array(8)["q", "i", "a", "n", "d", "u", "a", "n"]</span></div>
                <div>&nbsp;</div>
            </div>
            <!-- ! 代码部分 结束 -->
            <!-- ! 综合案例 结束 -->

            <!-- * toUpperCase() 方法 开始 -->
            <div>&nbsp;</div>
            <div class="da one-box c-red font-size-one">&gt;&gt; toUpperCase()</div>
            <div class="da r-font-two two-tbox">toUpperCase() 方法用于把字符串转换成大写。</div>
            <div class="da r-font-two">toUpperCase() 方法将所有的英文字符转换成大写的字符。（<span class="r-big-solid">※
                    温馨提示：使用该方法生成的是新字符串，原字符串不发生变化！</span>）</div>
            <!-- * 代码部分 开始 -->
            <div>&nbsp;</div>
            <div class="da r-font-two m-tb-5px code-text p-b-one">
                <div class="da m-tb-5px nocode-big r-font-two">// 定义一个字符串</div>
                <div class="da r-font-two m-tb-5px">var oSet = "QianDuan";</div>
                <div>&nbsp;</div>
                <div class="da m-tb-5px nocode-big r-font-two">// 将字符串转换成大写</div>
                <div class="da r-font-two m-tb-5px">var oSet1 = oSet.toUpperCase();</div>
                <div>&nbsp;</div>
                <div class="da m-tb-5px nocode-big r-font-two">// 后台输出</div>
                <div class="da r-font-two m-tb-5px">console.log(oSet1); <span class="nocode-big"> //
                        输出：QIANDUAN</span></div>
                <div>&nbsp;</div>
            </div>
            <!-- ! 代码部分 结束 -->
            <!-- ! toUpperCase() 结束 -->

            <!-- * toLowerCase() 方法 开始 -->
            <div>&nbsp;</div>
            <div class="da one-box c-red font-size-one">&gt;&gt; toLowerCase()</div>
            <div class="da r-font-two two-tbox">toLowerCase() 方法用于把字符串转换成小写。</div>
            <div class="da r-font-two">toLowerCase() 方法将所有的英文字符转换成小写的字符。（<span class="r-big-solid">※
                    温馨提示：使用该方法生成的是新字符串，原字符串不发生变化！</span>）</div>
            <!-- * 代码部分 开始 -->
            <div>&nbsp;</div>
            <div class="da r-font-two m-tb-5px code-text p-b-one">
                <div class="da m-tb-5px nocode-big r-font-two">// 定义一个字符串</div>
                <div class="da r-font-two m-tb-5px">var oSet = "QianDuan";</div>
                <div>&nbsp;</div>
                <div class="da m-tb-5px nocode-big r-font-two">// 将字符串转换成小写</div>
                <div class="da r-font-two m-tb-5px">var oSet1 = oSet.toLowerCase();</div>
                <div>&nbsp;</div>
                <div class="da m-tb-5px nocode-big r-font-two">// 后台输出</div>
                <div class="da r-font-two m-tb-5px">console.log(oSet1); <span class="nocode-big"> //
                        输出：qianduan</span></div>
                <div>&nbsp;</div>
            </div>
            <!-- ! 代码部分 结束 -->
            <!-- ! toLowerCase() 结束 -->

            <!-- * 截取方法 开始 -->
            <!-- * slice() 方法 开始 -->
            <div>&nbsp;</div>
            <div class="da one-box c-red font-size-one">&gt;&gt; slice(Start, End)</div>
            <div class="da r-font-two two-tbox">slice() 方法可提取字符串的某个部分，并以新的字符串返回被提取的部分。</div>
            <div class="da r-font-two">slice() 方法从开始位置截取到结束为止（但又不包括结束位置）的字符串。（<span class="r-big-solid">※
                    注意：该方法严格区分正负数，正值表示下标位置（即从 0 开始），负值则是从后面往前数的第 X 位（X 为负数的值），参数可以只传递一个，表示从开始位置截取到字符串结束！</span>）</div>
            <!-- ! slice() 结束 -->

            <!-- * substr() 方法 开始 -->
            <div>&nbsp;</div>
            <div class="da one-box c-red font-size-one">&gt;&gt; substr(Start, Howmany)</div>
            <div class="da r-font-two two-tbox">substr() 方法可在字符串中抽取从 Start 下标开始的指定数目的字符。</div>
            <div class="da r-font-two">substr() 方法从开始位置截取到指定长度的字符串。（<span class="r-big-solid">※
                    注意：该方法严格区分正负数，正值表示下标位置（即从 0 开始），负值则是从后面往前数的第 X 位（X 为负数的值），参数可以只传递一个，表示从开始位置截取到字符串结束！且 howmany
                    的值必须为正数！（也可以不写，不写则表示：从 start 位置开始截取到最后）</span>）</div>
            <!-- ! substr() 结束 -->

            <!-- * substring() 方法 开始 -->
            <div>&nbsp;</div>
            <div class="da one-box c-red font-size-one">&gt;&gt; substring(Start, end)</div>
            <div class="da r-font-two two-tbox">substring() 方法的参数必须是整数，比较两个数的大小，小的作为开始，大的作为结束；若为一个参数则从参数位置开始截取到最后。</div>
            <!-- ! substring() 结束 -->

            <!-- * 代码部分 开始 -->
            <div>&nbsp;</div>
            <div class="da r-font-two m-tb-5px code-text p-b-one">
                <div class="da m-tb-5px nocode-big r-font-two">// 定义一个字符串</div>
                <div class="da r-font-two m-tb-5px">var oSet = "qianduan";</div>
                <div>&nbsp;</div>
                <div class="da m-tb-5px nocode-big r-font-two">// 方法 01 slice(start, end)</div>
                <!-- 展示 - 01 -->
                <div>&nbsp;</div>
                <div class="da m-tb-5px yg-big r-font-two">// 展示 - 01</div>
                <div class="da r-font-two m-tb-5px">var oSet1 = oSet.slice(3, 6);</div>
                <div class="da r-font-two m-tb-5px">console.log(oSet1); <span class="nocode-big"> //
                        输出：ndu</span></div>
                <!-- 展示 - 02 -->
                <div>&nbsp;</div>
                <div class="da m-tb-5px yg-big r-font-two">// 展示 - 02</div>
                <div class="da r-font-two m-tb-5px">var oSet2 = oSet.slice(-6, -3);</div>
                <div class="da r-font-two m-tb-5px">console.log(oSet2); <span class="nocode-big"> //
                        输出：and</span></div>
                <!-- 展示 - 03 -->
                <div>&nbsp;</div>
                <div class="da m-tb-5px yg-big r-font-two">// 展示 - 03</div>
                <div class="da r-font-two m-tb-5px">var oSet3 = oSet.slice(-6);</div>
                <div class="da r-font-two m-tb-5px">console.log(oSet3); <span class="nocode-big"> //
                        输出：anduan</span></div>
                <div>&nbsp;</div>
                <div>&nbsp;</div>
                <div class="da m-tb-5px nocode-big r-font-two">// 方法 02 substr(start, howmany)</div>
                <!-- 展示 - 01 -->
                <div>&nbsp;</div>
                <div class="da m-tb-5px yg-big r-font-two">// 展示 - 01</div>
                <div class="da r-font-two m-tb-5px">var oSet4 = oSet.substr(3, 6);</div>
                <div class="da r-font-two m-tb-5px">console.log(oSet4); <span class="nocode-big"> //
                        输出：nduan</span></div>
                <!-- 展示 - 02 -->
                <div>&nbsp;</div>
                <div class="da m-tb-5px yg-big r-font-two">// 展示 - 02</div>
                <div class="da r-font-two m-tb-5px">var oSet5 = oSet.substr(-9, 6);</div>
                <div class="da r-font-two m-tb-5px">console.log(oSet5); <span class="nocode-big"> //
                        输出：qiandu</span></div>
                <!-- 展示 - 03 -->
                <div>&nbsp;</div>
                <div class="da m-tb-5px yg-big r-font-two">// 展示 - 03</div>
                <div class="da r-font-two m-tb-5px">var oSet6 = oSet.substr(-6);</div>
                <div class="da r-font-two m-tb-5px">console.log(oSet6); <span class="nocode-big"> //
                        输出：anduan</span></div>
                <div>&nbsp;</div>
                <div>&nbsp;</div>
                <div class="da m-tb-5px nocode-big r-font-two">// 方法 03 substring(start, end)</div>
                <!-- 展示 - 01 -->
                <div>&nbsp;</div>
                <div class="da m-tb-5px yg-big r-font-two">// 展示 - 01</div>
                <div class="da r-font-two m-tb-5px">var oSet7 = oSet.substring(3, 6);</div>
                <div class="da r-font-two m-tb-5px">console.log(oSet7); <span class="nocode-big"> //
                        输出：ndu</span></div>
                <!-- 展示 - 02 -->
                <div>&nbsp;</div>
                <div class="da m-tb-5px yg-big r-font-two">// 展示 - 02</div>
                <div class="da r-font-two m-tb-5px">var oSet8 = oSet.substring(6, 3);</div>
                <div class="da r-font-two m-tb-5px">console.log(oSet8); <span class="nocode-big"> //
                        输出：ndu</span></div>
                <!-- 展示 - 03 -->
                <div>&nbsp;</div>
                <div class="da m-tb-5px yg-big r-font-two">// 展示 - 03</div>
                <div class="da r-font-two m-tb-5px">var oSet9 = oSet.substring(6);</div>
                <div class="da r-font-two m-tb-5px">console.log(oSet9); <span class="nocode-big"> //
                        输出：an</span></div>
                <div>&nbsp;</div>
            </div>
            <!-- ! 代码部分 结束 -->
            <!-- ! 截取方法 结束 -->
        </div>
        <!-- ! 第 13 组 结束 -->
    </div>
    <!-- ! 中间部分 End -->

    <!-- 页脚部分 -->
    <div class="bootom">
        <div class="title-bottom">
            <span>友情链接</span>
        </div>
        <div class="text-box">
            <div class="text-one content-box">
                <p>内部链接</p>
                <a href="javascript:void(0);" onclick="oTiao(1, 1)">Null</a>
                <a href="javascript:void(0);" onclick="oTiao(1, 2)">Null</a>
                <a href="javascript:void(0);" onclick="oTiao(1, 3)">Null</a>
                <a href="javascript:void(0);" onclick="oTiao(1, 4)">Null</a>
                <a href="javascript:void(0);" onclick="oTiao(1, 5)">Null</a>
            </div>
            <div class="text-two content-box">
                <p>外部链接</p>
                <a href="javascript:void(0);" onclick="oTiao(2, 1)">Null</a>
                <a href="javascript:void(0);" onclick="oTiao(2, 2)">Null</a>
                <a href="javascript:void(0);" onclick="oTiao(2, 3)">Null</a>
                <a href="javascript:void(0);" onclick="oTiao(2, 4)">Null</a>
                <a href="javascript:void(0);" onclick="oTiao(2, 5)">Null</a>
            </div>
            <div class="text-three content-box">
                <p>快捷组件</p>
                <a href="javascript:void(0);" onclick="oTiao(3, 1)">Null</a>
                <a href="javascript:void(0);" onclick="oTiao(3, 2)">Null</a>
                <a href="javascript:void(0);" onclick="oTiao(3, 3)">Null</a>
                <a href="javascript:void(0);" onclick="oTiao(3, 4)">Null</a>
                <a href="javascript:void(0);" onclick="oTiao(3, 5)">Null</a>
            </div>
        </div>
        <div class="statement-box">
            作者：<a href="javascript:void(0);">苏常青</a>
            创建于：2022年01月31日 月曜日
            联系方式：<a href="javascript:void(0);">2244915205</a>
        </div>
    </div>
    <!-- ! 页脚部分 End -->
</body>

</html>